Auto Keyword Link

by nomomo

HTML

<div class="article">
  <span>파인애플과 애플은 둘 다 맛있다.</span>
  <span>맛있으면 바나나</span>
  <div>바나나를 먹으면 나한테 반하나?</div>
  <div><span>하나마나</span> <strong>말하나마나</strong></div>
  말 많아 진짜 말 많아
</div>

<span class="autolink_button">자동 링크 변환(클릭)</span>

CSS

body {
  line-height: 160%;
  font-size: 14px;
  text-align: center;
  height: 250px;
  background-color: #f3f5f6;
  overflow-y: hidden;
}

.article {
  background-color: #fff;
  padding: 1em;
}

.article span {
  display: block;
}

.autokeyword {
  color: blue;
}

.autolink_button {
  display: block;
  width: 200px;
  cursor: pointer;
  font-weight: bold;
  padding: 1em;
  margin: 1em auto;
  border-radius: 3px;
  border: 1px solid #ddd;
}

JavaScript

const array_keyword = 
      [
        {key:["파인애플","pineapple"],val:"http://pineapple.com"},
        {key:["애플","apple"],val:"http://apple.com"},
        {key:["바나나","banana"],val:"http://banana.com"},
        {key:["반하나","banhana"],val:"http://ban1.com"},
        {key:["하나","hana"],val:"http://hana.com"},
        {key:["나마나","namana"],val:"http://namana.com"},
        {key:["말","mal","horse","talk"],val:"http://mal.com"}
      ];

function keyword_to_link(target_elem) {
  var $textNodes = $(target_elem)
    .find("*")
    .addBack()
    .contents()
    .filter(function() {
      return this.nodeType === 3 &&
        !$(this).parent("a").length
    });

  $textNodes.each(function(index, element) { // element 에 대한 반복
    var stop = false;
    var contentText = $(element).text();
    console.log(contentText);
    $.each(array_keyword, function(si, sv) { // key-val 에 대한 반복
      if (stop) {
        stop = false;
        return false;
      }
      $.each(sv.key, function(ssi, ssv) { // key 에 대한 반복
        var search_target = ssv;
        if (contentText.indexOf(search_target) !== -1) {
          var $newElement = $("<autokeyword>" + contentText.split(search_target).join("<a href='" + sv.val + "' class='autokeyword'>" + search_target + "</a>") + "</autokeyword>"); // replaceAll
          $(element).after($newElement).remove();
          keyword_to_link($newElement);
          stop = true;
          return false;
        }
      });
    });
  });
}

$(".autolink_button").on("click",function(){
		keyword_to_link($(".article"));
})