티스토리 블로그 자동으로 키워드 링크 매칭하기

티스토리와 같은 블로그에서 글을 쓰다보면 키워드에 지난 글 링크를 걸어야 할 때가 많다. 보통 이럴 때는 다음과 같은 과정을 거치게 된다.

1. 키워드와 관련된 지난 글을 찾는다.
2. 지난 글의 링크를 복사한다.
3. 에디터로 돌아와 지난 글의 링크를 건다.

그런데 이는 키워드가 많아지면 상당히 귀찮은 일이 되며, 또 지난 번에 어떤 글을 썼는지 모두 기억하고 있기도 쉽지가 않다. 이를 자동으로 매칭할 수 있는 방법은 없을까?

 

다음 자바스크립트 코드를 사용하면 블로그 콘텐츠의 내용을 글자별로 뽑아 자동으로 링크를 걸 수 있다. 이를 위해서는 키워드와 이에 해당하는 링크를 매핑시켜줘야 하는데, 한 번 설정한 다음에는 각 본문에 처음으로 등장하는 해당 키워드가 링크 태그로 바뀌게 된다.

document.addEventListener("DOMContentLoaded", function () {
  console.log("DOM content loaded.");

  const articleContent = document.getElementById("article-content");
  const keywordPageMapping = {
    "블로그": "https://tistory.com",
    "원룸테이블": "https://oneroomtable.com",
    "발리": "https://oneroomtable.com/category/bali",
    "여행": "https://oneroomtable.com/travel"
  };

  const linkedKeywords = new Set();

  for (const keyword in keywordPageMapping) {
    const keywordRegex = new RegExp(escapeRegExp(keyword), "gi");
    const linkedKeyword = `${keyword}`;
    console.log(`Checking for keyword: ${keyword}`);

    articleContent.innerHTML = articleContent.innerHTML.replace(keywordRegex, matched => {
      console.log(`Found a match: ${matched}`);
      if (!linkedKeywords.has(keyword)) {
        linkedKeywords.add(keyword);
        console.log(`Linking keyword: ${keyword}`);
        return matched.replace(new RegExp(escapeRegExp(keyword), "gi"), linkedKeyword);
      }
      return matched;
    });
  }

  console.log("Finished processing keywords.");
  
  function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  }
});

마지막에 있는 escapeRegExp는 문자열을 받아와서 해당 문자열 내의 문자들을 이스케이프(escape) 처리해 함수다. 예를 들어, escapeRegExp 함수를 사용하지 않고 문자 "."을 정규표현식으로 검색하려면 /\./과 같이 이스케이프 처리를 해야 한다. 그러나 위 함수를 사용하면 문자열 그대로 바로 검색이 가능하다.

 

이를 실제로 적용해보면 다음과 같은 결과물을 얻을 수 있다. 예상대로 첫번째 키워드에 지정해둔 링크가 잘 걸리고 있다.

 

See the Pen Untitled by Jeong (@jeongKR) on CodePen.