[티스토리] 댓글에 링크 및 이미지 추가하기

업데이트

2020.07.03 - innerHTML을 사용하지 않고 댓글 내용을 업데이트합니다.

단순히 텍스트밖에 적을 수 없는 티스토리 댓글에 링크, 이미지, 비디오, 유튜브 등을 추가해 화려하게 꾸미는 스크립트입니다.

HTML 수정

<s_rp_container> 바로 아래에 있는 요소에 id가 없다면 하나 추가해주세요.
방명록에도 사용하시려면 <s_guest_container> 아래에 있는 요소에 같은 id를 추가하시면 됩니다.

[##_rp_rep_desc_##]을 감싼 요소에 class가 없다면 하나 추가해주세요. 댓글용과 답글용 2개가 있을 겁니다. 혹 class가 있더라도 해당 치환자를 감싼 요소가 아닌 다른 곳에도 사용되었다면 별도로 하나 추가해주세요.
마찬가지로 방명록에도 사용하시려면 [##_guest_rep_desc_##]를 검색하셔서 같은 작업을 진행하시면 됩니다.

Javascript 작업

const autoWrap = (containerId, selector) => {
  const wrapping = async () => {
    const link = /(\b(https?|ftp|file):\/\/[-A-Z0-9|ㄱ-ㅎ|ㅏ-ㅣ|가-힣|+&@#\/%?=~_|!:,.;]*[-A-Z0-9|ㄱ-ㅎ|ㅏ-ㅣ|가-힣|+&@#\/%=~_|])/gi; // 링크 찾기
    const mail = /((\S+.)@[a-z]+.[a-z]+)/gi;
    const imageType = /\.(?:jpe?g(:(large|orig))?|gif|png(:(large|orig))?|svg)$/i; // 이미지
    const TistoryImage = /(?:\?original)$/i; // 티스토리 ?original 이미지
    const videoType = /\.(?:mp4|webm)$/i; // 비디오
    const audioType = /\.(?:mp3|ogg|wav)$/i; // 오디오
    const youtubeLink = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?/g; // 유튜브 비디오
    const createAnchor = (string, type = "link") => {
      const anchor = document.createElement("a");
 
      anchor.href = type === "link" ? string : `mailto:${string}`;
      type === "link" &&
        ((anchor.target = "_blank"),
        anchor.setAttribute("rel", "noopener, noreferrer"));
      anchor.innerText = string;
 
      return anchor;
    };
 
    document.querySelectorAll(selector).forEach((comment) => {
      !comment.classList.contains("modded") &&
        comment.hasChildNodes &&
        [...comment.childNodes].forEach((text) => {
          if (text.nodeType === 3) {
            let textArray = text.textContent.split(link);
            if (textArray.length === 1)
              textArray = text.textContent.split(mail);
            if (textArray.length === 1) return;
            const fragment = document.createDocumentFragment();
 
            for (
              let i = 0, length = textArray.length, j = 1;
              i < length;
              i++
            ) {
              if (j % 3 !== 0) {
                const string = textArray[i];
                if (j % 2 === 0) {
                  if (string.includes("http:")) {
                    const anchor = createAnchor(string);
 
                    fragment.append(anchor);
                  } else {
                    if (
                      imageType.test(string) ||
                      TistoryImage.test(string)
                    ) {
                      const img = document.createElement(
                        "img"
                      );
 
                      img.src = string;
                      img.alt = "userContent";
 
                      fragment.append(img);
                    } else if (videoType.test(string)) {
                      const video = document.createElement(
                        "video"
                      );
 
                      video.src = string;
                      video.autoplay = 1;
                      video.muted = 1;
                      video.loop = 1;
                      video.setAttribute(
                        "playsinline",
                        1
                      );
 
                      fragment.append(video);
                    } else if (audioType.test(string)) {
                      const audio = document.createElement(
                        "audio"
                      );
 
                      audio.src = string;
                      audio.controls = 1;
 
                      fragment.append(audio);
                    } else if (youtubeLink.test(string)) {
                      const wrapper = document.createElement(
                        "div"
                      );
                      const div = document.createElement(
                        "div"
                      );
                      const iframe = document.createElement(
                        "iframe"
                      );
 
                      wrapper.className =
                        "youtubevid-wrapper";
                      div.className = "resvid";
 
                      iframe.src = `https://www.youtube.com/embed/${string.replace(
                        youtubeLink,
                        ""
                      )}?rel=0&playsinline=1`;
                      iframe.allowFullscreen = 1;
                      iframe.frameBorder = 0;
 
                      div.append(iframe);
                      wrapper.append(div);
                      fragment.append(wrapper);
                    } else if (mail.test(string)) {
                      const anchor = createAnchor(
                        string,
                        "mail"
                      );
 
                      fragment.append(anchor);
                    } else {
                      const anchor = createAnchor(string);
 
                      fragment.append(anchor);
                    }
                  }
                } else {
                  const textNode = document.createTextNode(
                    string
                  );
 
                  fragment.append(textNode);
                }
 
                j += 1;
              } else {
                j = 1;
              }
            }
 
            text.parentNode.insertBefore(fragment, text);
            text.remove();
          }
 
          comment.classList.add("modded");
        });
    });
  };
 
  document.addEventListener(
    "DOMContentLoaded",
    wrapping().then(() => {
      // 수정, 삭제, 이전 댓글 불러오기 등 변화 감지
      const container = document.getElementById(containerId);
      const observer = new MutationObserver(wrapping);
 
      container &&
        observer.observe(container, {
          attributes: true,
          childList: true,
          subtree: true,
        });
    })
  );
};

예전 스크립트는 0.5초마다 한 번씩 함수를 실행하게 해뒀는데, 이젠 MutationObserver를 이용해 변화를 감지하게 해뒀습니다.

위 스크립트를 별도로 js 파일로 작성해 스킨 편집에서 업로드하셔서 사용하시거나, 아래 주소를 사용하시면 업로드 필요 없이 압축된 js 파일을 사용하실 수 있습니다.

jsdelivr : https://cdn.jsdelivr.net/gh/marshall-ku/update-tistory-comments@latest/dist/autoWrap.js
github : https://marshall-ku.github.io/update-tistory-comments/dist/autoWrap.js

autoWrap("comment-list", ".comment-text");

스크립트 추가를 완료하셨다면, 위 코드처럼 호출해주세요.
첫 번째 인자론 <s_rp_container> 바로 아래에 있는 요소에 추가한 id를, 두 번째 인자론 [##_rp_rep_desc_##]를 감싼 요소에 추가한 class를 .과 함께 입력해주세요.

CSS 작업 (선택)

/* 이미지 비디오 최대 너비 설정 */
img,
video {
    max-width: 100%;
}
 
/* 유튜브 비디오 반응형으로 수정 */
.youtubevid-wrapper {
    width: 400px;
    max-width: 100%;
}
 
.resvid {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}
 
.resvid iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}