브라우저 번역 기능 개선 (네이버 웨일, 구글 크롬 브라우저)

1. 문제점

코드(<code>)가 포함된 문서의 브라우저 번역 기능이 제대로 동작하지 않는다. 주어, 목적어가 뒤섞임.

2. 현상 비교

2.1 원문

2.2 번역 결과

1. 네이버 웨일

2. 구글 크롬

2.3 기대하는 번역

이제 isComponent의 작동 방법을 알았으니, 우리는 model 속성 탐색을 시작할 수 있다.

3. 원인

isComponent, model 이라는 단어가 <code>로 감싸져있다.

4. 개선

<code>isComponent</code>를 isComponent으로 변경한다.

물론 이 단어들은 번역을 하면 안되기 때문에 class에 notranslate를 주면 된다는 블로그 글들이 많이 있다.

그런데 로 변경하면, 다시 주어, 목적어가 이상하게 번역된다.

대신, 단어 구분만 되면 되므로 "isComponent"으로 변경하였다.

일부 단어에서 여전히 번역이 되는 현상이 있어서 <a>"isComponent"</a> 으로 변경하였다.

그리고, <code>...</code> 내에 진짜 프로그래밍 코드가 있는 경우는 해당하지 않기 때문에 textNode일 때만 적용하도록 한다. (nodeType === 3)

previousSibling, nextSibling을 판단해서 문장내의 <code>만 번역한다.

var codeTags = document.querySelectorAll('code');
for (var i = 0, len = codeTags.length; i < len; i++) {
  var codeTag = codeTags[i];
  console.log(codeTag)
  if (codeTag.childNodes.length === 1 && 
  codeTag.childNodes[0].nodeType === 3 && 
  (codeTag.previousSibling?.nodeType === 3 || codeTag.nextSibling?.nodeType === 3)) {
    var aTag = document.createElement('a');
    aTag.innerHTML = `"${codeTag.innerHTML}"`;
    aTag.href = 'javascript:;';
    aTag.style.background = '#FFD9EC';
    codeTag.parentNode.replaceChild(aTag, codeTag);
  }
}

5. 결과

브라우저 개발자 도구를 열고, 위 스크립트를 실행 후, 다시 번역을 해보면 원하는 결과를 얻을 수 있다.