javascript - 如何使用 ES6/7 对 html 元素中的所有文本运行大量正则表达式替换？

Question

我正在寻找编写一个客户端脚本，该脚本将使用最奇特和最新的 JavaScript ES6/ES7 方法针对页面的文本节点运行多个正则表达式。我该怎么做？

Answer 1

你可以这样做.. jsfiddle

const elements = document.getElementsByTagName('*');
const replaceDict = { 'New Text': /Old Text/gi, 'what': /this/gi };

for ( const e1 of elements ) {
  if (e1.parentNode.nodeName != 'BODY') {
    continue;
  }
  Array
    .from(e1.childNodes)
    .filter( e => e.nodeType === Node.TEXT_NODE )
    .forEach( e2 => {
      let replaceText = e2.nodeValue;
      for ( let [k,v] of Object.entries(replaceDict) ) {
        replaceText = replaceText.replace( v, k );
      }
      if ( replaceText != e2.nodeValue ) {
      	console.log(`Replacing ${e2.nodeValue} with ${replaceText}`);
      	e2.nodeValue = replaceText;
      }
    } )
  ;
}

  <p>
   this is a Old Text test
  </p>
  <p>
   this is a Old Text test Old Text
  </p>

如果愿意，您也可以坚持使用 Array.from() 语法，

const elements = document.getElementsByTagName('*');
const replaceDict = { 'New Text': /Old Text/gi, 'what': /this/gi };

Array.from(elements)
  .filter( e => e.parentNode.nodeName === 'BODY' )
  .forEach( e => {

    Array.from(e.childNodes)
      .filter( e => e.nodeType === Node.TEXT_NODE )
      .forEach( e2 => {
        let replaceText = e2.nodeValue;
        for ( let [k,v] of Object.entries(replaceDict) ) {
          replaceText = replaceText.replace( v, k );
        }
        if ( replaceText != e2.nodeValue ) {
          console.log(`Replacing ${e2.nodeValue} with ${replaceText}`);
          e2.nodeValue = replaceText;
        }
      } );

  } );

这里我们有一个编译正则表达式的replaceDict。我们使用 ES6 迭代器迭代元素，然后将 dom 的 childNode 转换为数组，并使用 .filter 和 .forEach 进行替换。无论我们在节点上发出多少种不同的替换模式，我们都只更新文本节点一次。我们 console.log 用于调试目的。