블로그 메인 화면 요약문에 사용자 지정 태그 안의 텍스트만 넣기

JavaScript
#1

안녕하세요. 제가 스크립트는 문외한이고 질문할 곳도 마땅치 않았는데, 이곳을 우연히 알게 되어 이렇게 염치불구하고 질문 올립니다.

제가 위 링크의 코드를 제 블로그(https://singingdalong.blogspot.com)에 적용하여 본문의 글을 요약문 형식으로 메인 화면에 보여주도록 했습니다. 그런데 이 요약문이라는 것이 무조건 본문의 첫 번째 텍스트부터 계산하는지라 막상 제가 원하는 본문은 빼먹기가 일쑤입니다. 그러니까 이 요약문에 특정 태그, 예를 들어 제가 본문 태그로 사용하는 div.my_text + p.p1 안에 있는 텍스트만 포함하게 할 수 있을까요?

늦은 밤 잘 보내시고, 건강하세요. 그리고 마지막으로 초보자가 위 링크 코드를 이해할 수 있을 정도의 수준을 쌓을 수 있는 책 몇 권 부탁해도 될까요? 시간 나는 대로 도서관에서 빌려 볼 생각입니다. 가능하다면 추천하는 책이
https://www.hanamlib.go.kr/silib/searchSimple.do?key=152
도서관에 있는 책이었으면 좋겠습니다.

#2

그러니까 이 요약문에 특정 태그, 예를 들어 제가 본문 태그로 사용하는 div.my_text + p.p1 안에 있는 텍스트만 포함하게 할 수 있을까요?

<div class="my_text">
  <p class="p1">
    MMORPG 같은 온라인 게임은 ...
  </p>
  <p class="p1">
    <mark>
      분명히 이 방법은 통하지만 ...
    </mark>
  </p>
</div>

Yang Gun님 블로그의 본문에는 <p class="p1"> 태그가 여러 개 있습니다. 따라서 어느 <p class="p1"> 태그를 요약문으로 사용할지를 정해야 합니다. Yang Gun님께서 요약문에 넣기 원하는 <p> 태그의 클래스 속성의 이름을, 다른 <p> 태그 클래스 속성의 이름들과 다르게 부여 (예를 들면 요약문에 넣기 원하는 클래스 속성은 class="forsummary", 나머지 클래스 속성은 class="p1"으로 지정) 하는 것이 가능하다면 그 이후부터는 아래 JavaScript 코드를 좀 바꿔주는 것으로 해결할 수 있을 것 같네요.

function createSummaryAndThumb(pID){
  var div = document.getElementById(pID);

  // 아래 1줄은 제가 넣은 코드입니다
  var forsummary = div.getElementByClassName("forsummary")[0];

  var imgtag = "";
  var img = div.getElementsByTagName("img");
  var summ = posts_no_thumb_sum;
  if(img.length>=1) {
    imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    summ = posts_thumb_sum;
  }

  // 아래 2줄의 코드 중, 윗 줄은 원 코드이고, 아래 줄은 제가 수정한 코드입니다
  // var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
  var summary = imgtag + '<div>' + removeHtmlTag(forsummary.innerHTML,summ) + '</div>';

  div.innerHTML = summary;
}
좋아요 1
#3

고맙습니다. 첫 번째 추가 코드에 그냥 “P1” 입력한 다음 글자 수(summary_noimg)를 적당히 설정해 주니 본문(p1) 안에 있는 텍스트만 (순서대로) 메인 페이지 ‘요약문’에 보여줍니다. 'forsummary’라는 새 클래스를 만들어 원하는 본문만 '요약문’으로 표시하는 것도 잘되긴 하지만, 이렇게 하면 전체 글을 다 수정해야 하는 번거로움 때문에 현재로선 P1의 내용만 보여주는 것으로 만족해야겠습니다.

아니면 “forsummary” + “p1” 도 가능할까요? forsummary 클래스의 텍스트를 우선으로(앞으로 작성할 새 글을 위해) 읽어들이고, forsummary 클래스가 없으면 p1 클래스의 텍스트로 대체할 수 있는 (옛 글을 위해) 방법도 가능할까요?

아, 그리고 ‘getElementsByTagName’에서 ‘s’를 빼먹으신 것 같습니다. 덕분에 좀 헤맸습니다.

#4

Yang Gun님이 언급하신 '본문(p1)'이 무엇을 의미하는지에 대해 제가 완전히 이해하지 못하고 답변드린 것 같네요. (안타깝게도 아직 이해를 완전히 하지 못했습니다) 하지만 어쨌든 도움이 되었다니 다행입니다.

그리고 아래 추가질문 관련해서는

forsummary 클래스의 텍스트를 우선으로(앞으로 작성할 새 글을 위해) 읽어들이고, forsummary 클래스가 없으면 p1 클래스의 텍스트로 대체할 수 있는 (옛 글을 위해) 방법도 가능할까요?

아래 코드와 같이 if문을 추가하면 될 것 같네요.

...
var forsummary = div.getElementsByClassName("forsummary")[0];

// 위의 처리 결과, <p class="forsummary">인 p태그가 없을 경우,
// <p class="p1">인 p태그들 중 첫번째 p태그를 선택하여 forsummary에 할당
if (forsummary === undefined) {
  forsummary = div.getElementsByClassName("p1")[0];
};
...

제일 마지막에 언급하신

아, 그리고 ‘getElementsByTagName’에서 ‘s’를 빼먹으신 것 같습니다. 덕분에 좀 헤맸습니다.

부분은 아마 getElementsByClassName을 지칭하신 것 같은데, 말씀하신대로 s가 빠져있네요. 좀 헤매셨다니 죄송합니다. 그리고 위 코드의 getElementsByClassName에는 s를 포함했습니다.

좋아요 1
#5

죄송하다니요. 천만의 말씀이십니다. GetElementsByTagName에서 ‘s’자 하나 빼먹어도 눈치 못 채는 신출내기를 위해 자세히 설명해주셔서 몸 둘 바를 모르겠습니다. 너무나 고맙습니다. 위에서 언급하신 ‘if’ 구문을 여러 개 생성하니(예를 들어, 1이 없으면 2, 2가 없으면 3, 3이 없으면 4…) 제가 원하는 대로 완벽하게 작동합니다. 블로그 초기에 알았으면 이렇게 ‘if’ 구문을 여러 개 생성할 필요는 없었는데, 게시글이 500개나 되다 보니 일일이 수정하기가 너무 번거로워 일단은 이렇게 사용해야겠습니다.

아무튼, 많이 귀찮으셨을 텐데 일일이 답변해주셔서 너무나도 고맙습니다. 건강하세요.

#6

네, 답변이 도움이 되었다니 다행입니다. 제 자신이 이곳저곳에서 고수들의 도움으로 많이 배우고 있는 사람으로서, 남에게 도움을 줄 수 있는 기회를 가질 수 있었다는 것이 감사하네요. 그럼 수고하세요.