用带有 chrome 扩展名的链接替换文本 [英] Replace text with link with chrome extension
问题描述
我正在尝试用链接替换网页上的文本.当我尝试这个时，它只是用标签而不是链接替换文本.例如，此代码将替换河流"为:
I am trying to replace text on a webpage with links. When I try this it just replaces the text with the tag and not a link. For example this code will replace "river" with:
<a href="http://www.cnn.com">asdf</a>
这是我目前所拥有的:
function handleText(textNode)
{
var v = textNode.nodeValue;
v = v.replace(/river/g, '<a href="http://www.cnn.com">asdf</a>');
textNode.nodeValue = v;
}
推荐答案
如果您只想将文本更改为其他纯文本，那么您可以直接更改文本节点的内容.但是，您想要添加 元素.对于您想要添加的每个 元素，您实际上是想要添加一个子元素.文本节点不能有子节点.因此，要做到这一点，您实际上必须用更复杂的结构替换文本节点.这样做时，您将希望对 DOM 产生尽可能小的影响，以免干扰依赖于当前 DOM 结构的其他脚本.产生很小影响的最简单方法是用包含新文本节点的 替换文本节点(文本将围绕新的 >) 和任何新的 元素.
If all you wanted to do was change the text to other plain text, then you could change the contents of the text nodes directly. However, you are wanting to add an <a> element. For each <a> element you want to add, you are effectively wanting to add a child element. Text nodes can not have children. Thus, to do this you have to actually replace the text node with a more complicated structure. In doing so, you will want to make as little impact on the DOM as possible, in order to not disturb other scripts which rely on the current structure of the DOM. The simplest way to make little impact is to replace the text node with a <span> which contains the new text nodes (the text will split around the new <a>) and any new <a> elements.
下面的代码应该可以满足您的需求.它将 textNode 替换为包含新文本节点和创建的 元素的 .它仅在需要插入一个或多个 元素时进行替换.
The code below should do what you desire. It replaces the textNode with a <span> containing the new text nodes and the created <a> elements. It only makes the replacement when one or more <a> elements need to be inserted.
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(/river/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 代码取自我在这里的回答.
这篇关于用带有 chrome 扩展名的链接替换文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
