티슷 썰 백업 대안:

쓰실 때

A: 이렇게 이렇게

B: 이렇게 이렇게

A: 이렇게 요렇게

이렇게~ 나눠서 말해도 들어가요

B: 답변

 

ㄴ 이런 식으로 적은 다음에 html 들어가서 아래 블럭을 맨 아래에 넣어줘요

<script>
const cssContent = `
article p:first-child {
  top: 50px;
}

body div.message.A_message,
body div.message.B_message {
  padding: 10px 15px !important;
}

body div.message.A_message {
  margin: 5px 20px 5px 0px !important;
}

body div.message.B_message {
  margin: 5px 0px 5px 20px !important;
}

.A_message,
.B_message {
  display: inline-block;
  max-width: 80% !important;
  word-wrap: break-word;
  clear: both;
  border: 1px solid lightgray;
  border-radius: 10px;
}

.A_message {
  background-color: #d9fdd3; /* 연한 녹색 */
  color: #000;
  float: right;
  text-align: left;
  border-radius: 10px 10px 0px 10px;
}

.B_message {
  background-color: #f1f1f1; /* 연한 회색 */
  color: #000;
  float: left;
  text-align: left;
  border-radius: 10px 10px 10px 0px;
}

.message img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 5px auto;
  border-radius: 10px;
  border: 1px solid lightgray;
}
`;

const styleTag = document.createElement('style');
styleTag.textContent = cssContent;
document.head.appendChild(styleTag);

let rawHtml = $('div.tt_article_useless_p_margin').html();
rawHtml = rawHtml.replace(/<script[\s\S]*?<\/script>/g, '');
  
let figureArray = [];
rawHtml = rawHtml.replace(/<figure[\s\S]*?<\/figure>/g, function (match) {
  figureArray.push(match);
  var figurecar = '(figure' + (figureArray.length - 1) + ')';
return '<p>' + figurecar + '</p>';
});

let textContent = [];
rawHtml.replace(/<p[^>]*>([\s\S]*?)<\/p>/g, function (_, match) {
  //let cleanedText = match.replace(/<[^>]+>/g, '').trim();
  let cleanedText = match.trim();
  if (cleanedText) textContent.push(cleanedText); // 텍스트만 저장
});

let regex = /([AB]):([\s\S]*?)(?=A:|B:|$)/g;
let results = [];
textContent.join(' ').replace(regex, function (_, sender, message) {
  results.push({ sender: sender.trim(), message: message.trim() });
});

let newHtml = results.map((item) => {
  let messageClass = item.sender === 'A' ? 'A_message' : 'B_message';

  // 줄바꿈 있으면  변환
  let messageContent = item.message
    .replace(/\(figure(\d+)\)/g, function (_, index) {
      return figureArray[parseInt(index, 10)] || '';
    })
    .replace(/\n/g, '<br>'); // 줄바꿈을 <br>로 변환

  return `<div class="message ${messageClass}">${messageContent}</div>`;
});

$('div.tt_article_useless_p_margin').html(newHtml.join(''));
 
</script>

 

그럼 

이게

 

아래가 됨

 

이 방법은 어때