댓글에 사진 보이게 하는 방법

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

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

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

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

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 파일을 사용하실 수 있습니다.

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

이미지나 비디오가 댓글 창을 벗어나는 걸 방지하기 위해 최대 너비를 설정해주는 스타일과, 추가된 유튜브 비디오를 반응형으로 수정하는 스타일입니다. 필요하시면 추가해주세요.

작업이 완료됐으면 댓글에 웹사이트의 주소, 혹은 이미지 / 비디오 등의 주소를 추가해보세요.