ウェブページのテキストをリンクに置き換えようとしています。私はこれを試してみると、リンクではなくタグでテキストを置き換えるだけです。これは私がこれまで持っているものであるテキストをChromeの拡張子のあるリンクに置き換えます。
<a href="http://www.cnn.com">asdf</a>
：
function handleText(textNode)
{
var v = textNode.nodeValue;
v = v.replace(/\briver\b/g, '<a href="http://www.cnn.com">asdf</a>');
textNode.nodeValue = v;
}
あなたがやってみたかったすべては、あなた、他のプレーンテキストにテキストを変更した場合たとえば、このコードでは、との「川」を置き換えますテキストノードの内容を直接変更することができます。ただし、<a>要素を追加する必要があります。追加する各<a>要素に対して、子要素を効果的に追加する必要があります。テキストノードは子を持つことはできません。したがって、これを行うには、実際にテキストノードをより複雑な構造に置き換える必要があります。そうすることで、DOMの現在の構造に依存する他のスクリプトを妨げないように、できるだけDOMへの影響を最小限に抑えたいと思うでしょう。ほとんど影響を与えない最も簡単な方法は、新しいテキストノード（テキストは新しい<a>の周りで分割されます）と新しい<a>要素を含む<span>でテキストノードを置き換えることです。
以下のコードは、あなたが望むようにする必要があります。 textNodeは、新しいテキストノードと作成された<a>要素を含む<span>に置き換えられます。 1つ以上の<a>要素を挿入する必要がある場合にのみ置換を行います。
function handleTextNode(textNode) {
if(textNode.nodeName !== '#text'
|| textNode.parentNode.nodeName === 'SCRIPT'
|| textNode.parentNode.nodeName === 'STYLE'
) {
//Don't do anything except on text nodes, which are not children
// of <script> or <style>.
return;
}
let origText = textNode.textContent;
let newHtml=origText.replace(/\briver\b/g,'<a href="http://www.cnn.com">asdf</a>');
//Only change the DOM if we actually made a replacement in the text.
//Compare the strings, as it should be faster than a second RegExp operation and
// lets us use the RegExp in only one place for maintainability.
if(newHtml !== origText) {
let newSpan = document.createElement('span');
newSpan.innerHTML = newHtml;
textNode.parentNode.replaceChild(newSpan,textNode);
}
}
//Testing: Walk the DOM of the <body> handling all non-empty text nodes
function processDocument() {
//Create the TreeWalker
let treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT,{
acceptNode: function(node) {
if(node.textContent.length === 0) {
//Alternately, could filter out the <script> and <style> text nodes here.
return NodeFilter.FILTER_SKIP; //Skip empty text nodes
} //else
return NodeFilter.FILTER_ACCEPT;
}
}, false);
//Make a list of the text nodes prior to modifying the DOM. Once the DOM is
// modified the TreeWalker will become invalid (i.e. the TreeWalker will stop
// traversing the DOM after the first modification).
let nodeList=[];
while(treeWalker.nextNode()){
nodeList.push(treeWalker.currentNode);
}
//Iterate over all text nodes, calling handleTextNode on each node in the list.
nodeList.forEach(function(el){
handleTextNode(el);
});
}
document.getElementById('clickTo').addEventListener('click',processDocument,false);<input type="button" id="clickTo" value="Click to process"/>
<div id="testDiv">This text should change to a link -->river<--.</div>TreeWalkerのコードはmy answer hereから採取しました。
textnodeの親の 'innerHTML'に割り当てる必要があります。 – wOxxOm
'textNode'は実際にTEXTノードですか？もしそうなら、テキストノードは子を持たず、そうしようとしている方法を割り当てるだけで ''を作成することはできません。あなたはそれを普通の要素のようなものとして扱おうとしています。実際のテキストノード（つまり、 'textNode.nodeName === '＃text''）を渡していると仮定しますか、あるいはどのタイプの要素を' handleText（） 'に渡すことを期待していますか？ – Makyen