DOM

Question

からテキストを抽出し、交換する汎用的な方法は、私は2人のラッパーがあります

function wrapSentences(str, tmpl) { 
    return str.replace(/[^\.!\?]+[\.!\?]+/g, tmpl || "<sentence>$&</sentence>") 
} 

と

function wrapWords(str, tmpl) { 
return str.replace(/\w+/g, tmpl || "<word>$&</word>"); 
} 

を、私は任意のウェブページ上のすべての単語や文をラップするために私達の拡張では、これらを使用しますTTSと設定のためのユーザー訪問。

document.bodyはすべてのウェブサイトで最も基本的な要素ですが、body.innerHTML = wrapWords(body.innerText)を実行すると、異なるテキストノード間にあった要素が（明らかに）置き換えられ、ウェブサイト（の視覚的部分）が破損します。私は、その要素に関する何かを知らなくても、テキストのまわりで最も近い要素を見つける方法を探しています。したがって、Webサイトを変更することなくラップされたものと置き換えることができます。

私はいくつかの例を見つけましたが、最も深い子に行きますが、それらはすべて、拡張機能が知ることのできない何か（ノードまたはID）を渡すことに依存しています。私たちは強調表示のために乱暴を使用しますが、同じ問題があります...ランダムなサイトを訪れたときに拡張機能が認識できないノードまたはIDを必ず渡す必要があります。渡されたノードを必要とする例の

ワン：

function replaceTextNodes(node, newText) { 
    if (node.nodeType === 3) { 
     //Filter out text nodes that contain only whitespace 
     if (!/^\s*$/.test(node.data)) { 
      node.data = newText; 
     } 
    } else if (node.hasChildNodes()) { 
     for (let i = 0, len = node.childNodes.length; i < len; ++i) { 
      replaceTextNodes(node.childNodes[i], newText); 
     } 
    } 
} 

私はそれがより良い、必要に応じて説明させていただきます。私の言葉遣いがいつも最高ではないかもしれないことを恐れている、私はそれを認識している。

Answer 1

ページのすべてのテキストノードが望ましいように見えます... This questionあなたの答えがあるかもしれません。

編集：最初の答えからの機能を使用して
は今、あなたは再帰関数を使用する場合は、最後に提示のよう

function textNodesUnder(el){ 
    var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false); 
    while(n=walk.nextNode()) a.push(n); 
    return a; 
} 

exp = /(?:(\W+)|(\w+))/g 

textNodesUnder(document.body) 
    .filter(t => !/^\s*$/.test(t.textContent)) 
    .forEach(t => { 
     let s = t.textContent, match 
     while(match = exp.exec(s)) { 
      let el 
      if(match[1] !== undefined) { 
       el = document.createTextNode(match[1]) 
      } 
      else { 
       el = document.createElement("word") 
       el.textContent = match[2] 
      } 
      t.parentNode.insertBefore(el, t) 
     } 
     t.parentElement.removeChild(t) 
    })