바른 말씨 extension에서 틀린 단어를 클릭하면 해당 대치어로 고쳐주는 것의 구현 방식

Me, myself & and I, Web Development 댓글 달기

바른 말씨 extension을 쓰면서 항상 아쉬웠고 구현하고자 하는 기능이 있었는데, 검사 후에 틀린 단어로 표시된 것을 어떻게 하면 제시된 해당 대치어로 쉽게 고쳐줄 수 있을까 하는 고민이었다.

처음엔 그냥 웹페이지에 표시된 틀린 단어에 마우스를 가져가면 tooltip 형태로 해당 대치어를 보여주는 방법을 구상해 보았지만, 또 막상 고치려면 수작업이 필요해서 마땅치 않았다. 그래서 구상한 것이 틀린 단어를 클릭하면 자동으로 해당 대치어로 바꿔주는 방법 쪽으로 고민해봤다.

우선 틀린 단어에 대한 대치어를 각각 따로 저장해 놓을 장소가 필요했는데, 여기엔 HTML5의 custom data attribute이 안성맞춤이다.

선택한 문장 중에 틀린 단어를 표시하려는 목적의 mark element로 감싸주는 함수의 for loop에서 해당 대치어도 함께 심어주는 방법으로 다음과 같이 구현했다.

var i, j = result.wrongWord.length;
var stringPattern, re;
for (i = 0; i < j; i += 1) {
  stringPattern = '(?!.+<\/mark)' + result.wrongWord[i].replace(/(\(|\))/gm, '\\$1');
  re = RegExp(stringPattern);
  replacingHTML = replacingHTML.replace(re, '<mark class="ksc-highlighted" data-ksc-correct-word="'+ result.correctWord[i].replace(/\n/gm, '|') + '">' + result.wrongWord[i] + '</mark>'); // highlighting 
}

하나의 단어에 해당 대치어가 여러 개일 땐 보통 검사 결과 값으로 돌려받는 대치어가 새로운 줄(\n)로 구분되어 있기 때문에 새로운 줄 대신에 파이프 문자(|)로 대치해서 심어주었다.

이렇게 하면, 예를 들어, 검사 후에 틀린 단어는 아래와 같은 DOM 구조를 가진다.

<span>곡을 만드는 각 단계에서 <mark class="ksc-highlighted" data-ksc-correct-word="음향|소리|">사운드</mark>...</span>

이제 틀린 단어를 클릭하면 여기에 심어둔 클릭 이벤트 핸들러 함수가 실행되면서 번갈아 해당 대치어로 바꿔준다.

function swapWord(event) {
  var theElement = event.target;
  var correctWordList = theElement.dataset.kscCorrectWord.split('|');
  var correctWord = correctWordList.shift();
  if (correctWord !== '') {
    theElement.textContent = correctWord;
    theElement.dataset.kscCorrectWord = correctWordList.join('|');
    var theClassList = theElement.classList;
    if (!theClassList.contains('fixed')) {
      theClassList.add('fixed');
    }
    if (correctWordList[0] === '') {
      theClassList.add('no-more');
    }
  }
}

한번 바꿔치기 당한 대치어는 해당 element의 dataset에서 삭제되고 더는 해당 대치어가 남아있지 않을 땐 해당 element에 ‘no-more’ class를 지정해서 더 바꿀 게 없다는 것을 은연중 알려준다. 아래는 이렇게 해서 구현된 대치어 치환 과정을 보여주는 영상.

IE 브라우저의 호환성을 염두에 둘 필요가 없다면, 각 element의 class 속성은 classList(DOMTokenList)를 쓰면 손쉽게 조정할 수 있어서 훨씬 간편하다.

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요