Pure Javascript - DOM에서 단어 목록 찾기/바꾸기

Question

나는 단어 목록을 가지고 있으며이를 DOM에서 바꾸려고합니다.

바꾸기가 작동하지만 문제가 있습니다. 및 대체 텍스트 후에는 원하지 않는 슬래시 바 박았 전에

또한

, 내가 좋아하는, HTML 태그로 대체 단어를 마무리해야 할 (즉 여단 감소를 >은/기타 WORD 1/여단을 감소) . 당신은 여기에 코드를 볼 수 있습니다

(여단 > 감소 즉 기타 WORD 1 여단 감소) : JS의 https://jsfiddle.net/realgrillo/9uL6ofge/

var elements = document.getElementsByTagName('*'); 

var words = [ 

    [/(^|\s)([Tt]o)(\s|$)/ig, 'OTHER WORD 1'], 
    [/(^|\s)([Aa]nd)(\s|$)/ig, 'OTHER WORD 2'] 

]; 

for (var i = 0; i < elements.length; i++) { 
    var element = elements[i]; 

    for (var j = 0; j < element.childNodes.length; j++) { 

     var node = element.childNodes[j]; 

     if (node.nodeType === 3) { 

      var text = node.data; 

      for (var k = 0; k < words.length; k++) 
      { 
       var from = new RegExp(words[k][0]); 
       var to = new RegExp('$1' + words[k][1] + '$3'); 
       var replacedText = text.replace(from, to); 

       //console.log("from: " + from); 
       //console.log("to: " + to); 
       //console.log("toDo: " + toDo); 

       if (replacedText !== text) 
       { 
        element.innerHTML = element.textContent.replace(from, to); 
        console.log("text: " + text); 
        console.log("replacedText: " + replacedText); 
       } 
      } 

      /* 
      // 
      //!!!!THIS CODE FOR 1 WORD WORKS!!!! I need to do this for the list of words. 
      // 
      var replacedText = text.replace(/(^|\s)([Tt]o)(\s|$)/ig, '$1OTHER WORD$3'); 

      if (replacedText !== text) { 

       element.innerHTML = element.textContent.replace(/(^|\s)([Tt]o)(\s|$)/ig, '$1<b class=modified>OTHER WORD</b>$3'); 
      } 
      */ 
     } 
    } 
} 

석사를, 당신이 나를 도와 드릴까요? 순수한 자바 스크립트가 아니라 jQuery하시기 바랍니다.

감사합니다.

Answer 1

나는 훨씬 더 간단한 기능을 사용할 수 있습니다. 먼저 다음과 같은 단어를 대체하는 기능을 정의 : 순수 자바 스크립트 replace 기능은 전체의 경우 한 번 교체 이유

String.prototype.replaceAll = function (search, replacement) { 
      try { 
       var target = this; 
       return target.split(search).join(replacement); 
      } catch (e) { 
       return ""; 
      } 
     }; 

합니다. 그 후 여기처럼 코드에서 사용할 수 있습니다 :

var replacedText = text.replaceAll(/(^|\s)([Tt]o)(\s|$)/ig, '$1OTHER WORD$3'); 

Answer 2

당신은 생성자가 RegExp을 처리 할 수 ​​있기 때문에 중단하지 않을지라도, 이미 하나 같이 RegExp에 words[k][0]을 구문 분석 할 필요가 없습니다 잘.

또한 words[k][1]의 경우 String.prototype.replace의 두 번째 매개 변수가 일반 문자열이기 때문에 으로 구문 분석 할 필요가 없습니다. RegExp을 문자열로 변환하고 출력을 끝내기 때문에 슬래시가 있습니다.

그래서이이 문제를 해결할 것입니다 변화 :

var to = '$1' + words[k][1] + '$3'; 

그리고 이것은 선택 사항이지만 아마 좋은 방법입니다 :

var from = words[k][0]; 

HTML 태그를 얻기 위해, 당신은 직접 변경할 수 있습니다 words[k][1] 또는 to var 선언에서 원하는대로 선택할 수 있습니다. 추가

---

: for 루프에서

는 코드는 대안 words[k][1]에서 직접이 교체를 위임 할 수 있었다, 적어도 세 그룹 (때문에 '$3' 기준으로) 항상 있다고 가정 그러나 결정하는 것은 당신에게 달려 있습니다.