blocks|key|96404|text|您可能需要node作为父节点，这样您就可以只使用innerHTML：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|96405|node.innerHTML=node.childNodes[0].nodeValue.replace(/lol/,+"lol");|code-block|syntax|javascript|96406|在这里，node.childNodes[0]指的是实际的文本节点，node是它的包含元素。|96407|entityMap^0|5|4|0|0|4|I|X|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

You may need <code>node</code> to be the parent node, that way you can just use innerHTML:

<pre><code>node.innerHTML=node.childNodes[0].nodeValue.replace(/lol/, "&lt;span&gt;lol&lt;/span&gt;");
</code></pre>

Here <code>node.childNodes[0]</code> refers to the actual text node, and <code>node</code> is its containing element.

blocks|key|96437|text|Andreas+Josas提出的答案相当不错。但是，当搜索词在同一文本节点中多次出现时，代码有几个bug。这是修复了这些错误的解决方案，此外，为了更容易使用和理解，插入内容被分解到matchText中。现在，只有新标记在回调中构造，并通过返回传递回matchText。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|96438|使用错误修复更新了matchText函数：|96439|var+matchText+=+function(node,+regex,+callback,+excludeElements)+{+

++++excludeElements+%7C%7C+(excludeElements+=+['script',+'style',+'iframe',+'canvas']);
++++var+child+=+node.firstChild;

++++while+(child)+{
++++++++switch+(child.nodeType)+{
++++++++case+1:
++++++++++++if+(excludeElements.indexOf(child.tagName.toLowerCase())+>+-1)
++++++++++++++++break;
++++++++++++matchText(child,+regex,+callback,+excludeElements);
++++++++++++break;
++++++++case+3:
++++++++++++var+bk+=+0;
++++++++++++child.data.replace(regex,+function(all)+{
++++++++++++++++var+args+=+[].slice.call(arguments),
++++++++++++++++++++offset+=+args[args.length+-+2],
++++++++++++++++++++newTextNode+=+child.splitText(offset%2Bbk),+tag;
++++++++++++++++bk+-=+child.data.length+%2B+all.length;

++++++++++++++++newTextNode.data+=+newTextNode.data.substr(all.length);
++++++++++++++++tag+=+callback.apply(window,+[child].concat(args));
++++++++++++++++child.parentNode.insertBefore(tag,+newTextNode);
++++++++++++++++child+=+newTextNode;
++++++++++++});
++++++++++++regex.lastIndex+=+0;
++++++++++++break;
++++++++}

++++++++child+=+child.nextSibling;
++++}

++++return+node;
};|code-block|syntax|javascript|96440|用法：|96441|matchText(document.getElementsByTagName("article")[0],+new+RegExp("\\b"+%2B+searchTerm+%2B+"\\b",+"g"),+function(node,+match,+offset)+{
++++var+span+=+document.createElement("span");
++++span.className+=+"search-term";
++++span.textContent+=+match;
++++return+span;
});|96442|如果您希望插入锚点(链接)标记而不是span标记，请将create元素更改为"a“而不是"span"，添加一行以将href属性添加到标记中，并将'a‘添加到excludeElements列表中，这样就不会在链接内创建链接。|96443|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The answer presented by Andreas Josas is quite good. However the code had several bugs when the search term appeared several times in the same text node. Here is the solution with those bugs fixed and additionally the insert is factored up into matchText for easier use and understanding. Now only the new tag is constructed in the callback and passed back to matchText by a return.

Updated matchText function with bug fixes:

<pre><code>var matchText = function(node, regex, callback, excludeElements) { 

 excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas']);
 var child = node.firstChild;

 while (child) {
 switch (child.nodeType) {
 case 1:
 if (excludeElements.indexOf(child.tagName.toLowerCase()) &gt; -1)
 break;
 matchText(child, regex, callback, excludeElements);
 break;
 case 3:
 var bk = 0;
 child.data.replace(regex, function(all) {
 var args = [].slice.call(arguments),
 offset = args[args.length - 2],
 newTextNode = child.splitText(offset+bk), tag;
 bk -= child.data.length + all.length;

 newTextNode.data = newTextNode.data.substr(all.length);
 tag = callback.apply(window, [child].concat(args));
 child.parentNode.insertBefore(tag, newTextNode);
 child = newTextNode;
 });
 regex.lastIndex = 0;
 break;
 }

 child = child.nextSibling;
 }

 return node;
};
</code></pre>

Usage:

<pre><code>matchText(document.getElementsByTagName("article")[0], new RegExp("\\b" + searchTerm + "\\b", "g"), function(node, match, offset) {
 var span = document.createElement("span");
 span.className = "search-term";
 span.textContent = match;
 return span;
});
</code></pre>

If you desire to insert anchor (link) tags instead of span tags, change the create element to be "a" instead of "span", add a line to add the href attribute to the tag, and add 'a' to the excludeElements list so that links will not be created inside links.

blocks|key|313384|text|这并不是说这是一个更好的答案，但我只是为了完整而发布我所做的事情。在我的例子中，我已经查找或确定了需要在特定的#text节点中突出显示的文本的偏移量。这也澄清了步骤。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|313385|//node+is+a+#text+node,+startIndex+is+the+beginning+location+of+the+text+to+highlight,+and+endIndex+is+the+index+of+the+character+just+after+the+text+to+highlight+++++

var+parentNode+=+node.parentNode;

//+break+the+node+text+into+3+parts:+part1+-+before+the+selected+text,+part2-+the+text+to+highlight,+and+part3+-+the+text+after+the+highlight
var+s+=+node.nodeValue;

//+get+the+text+before+the+highlight
var+part1+=+s.substring(0,+startIndex);

//+get+the+text+that+will+be+highlighted
var+part2+=+s.substring(startIndex,+endIndex);

//+get+the+part+after+the+highlight
var+part3+=+s.substring(endIndex);

//+replace+the+text+node+with+the+new+nodes
var+textNode+=+document.createTextNode(part1);
parentNode.replaceChild(textNode,+node);

//+create+a+span+node+and+add+it+to+the+parent+immediately+after+the+first+text+node
var+spanNode+=+document.createElement("span");
spanNode.className+=+"HighlightedText";
parentNode.insertBefore(spanNode,+textNode.nextSibling);

//+create+a+text+node+for+the+highlighted+text+and+add+it+to+the+span+node
textNode+=+document.createTextNode(part2);
spanNode.appendChild(textNode);

//+create+a+text+node+for+the+text+after+the+highlight+and+add+it+after+the+span+node
textNode+=+document.createTextNode(part3);
parentNode.insertBefore(textNode,+spanNode.nextSibling);|code-block|syntax|javascript|313386|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Not saying this is a better answer, but I'm posting what I did for completeness. In my case I have already looked up or determined the offsets of the text that I needed to highlight in a particular #text node. This also clarifies the steps.

<pre><code>//node is a #text node, startIndex is the beginning location of the text to highlight, and endIndex is the index of the character just after the text to highlight 

var parentNode = node.parentNode;

// break the node text into 3 parts: part1 - before the selected text, part2- the text to highlight, and part3 - the text after the highlight
var s = node.nodeValue;

// get the text before the highlight
var part1 = s.substring(0, startIndex);

// get the text that will be highlighted
var part2 = s.substring(startIndex, endIndex);

// get the part after the highlight
var part3 = s.substring(endIndex);

// replace the text node with the new nodes
var textNode = document.createTextNode(part1);
parentNode.replaceChild(textNode, node);

// create a span node and add it to the parent immediately after the first text node
var spanNode = document.createElement("span");
spanNode.className = "HighlightedText";
parentNode.insertBefore(spanNode, textNode.nextSibling);

// create a text node for the highlighted text and add it to the span node
textNode = document.createTextNode(part2);
spanNode.appendChild(textNode);

// create a text node for the text after the highlight and add it after the span node
textNode = document.createTextNode(part3);
parentNode.insertBefore(textNode, spanNode.nextSibling);
</code></pre>

blocks|key|313416|text|对于那些现在发现这个问题的人来说，最新的答案如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|313417|function+textNodeInnerHTML(textNode,innerHTML)+{
++++var+div+=+document.createElement('div');
++++textNode.parentNode.insertBefore(div,textNode);
++++div.insertAdjacentHTML('afterend',innerHTML);
++++div.remove();
++++textNode.remove();
}|code-block|syntax|javascript|313418|我们的想法是使用以下命令在textNode之前插入一个新创建的html元素(比如var+div+=+document.createElement('div');)：|offset|length|style|CODE|313419|textNode.parentNode.insertBefore(div,textNode);|313420|然后使用：|313421|div.insertAdjacentHTML(
+'afterend',
+textNode.data.replace(/lol/g,`<span+style="color+:+red">lol`)
)+|313422|然后使用以下命令删除textNode和div：|313423|textNode.remove();
div.remove();|313424|insertAdjacentHTML不会像innerHTML那样销毁事件侦听器。|313425|如果要查找elm的子代的所有文本节点，请使用：|313426|[...elm.querySelectorAll('*')]
.map(l+=>+[...l.childNodes])
.flat()
.filter(l+=>+l.nodeType+===+3);|313427|entityMap^0|0|0|D|8|14|14|0|0|0|0|A|8|J|3|0|0|0|I|L|9|0|5|3|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@$I|17|J|18|K|L]|$I|19|J|1A|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1E|8|@$I|1F|J|1G|K|L]|$I|1H|J|1I|K|L]]|9|@]|A|$]]|$1|U|3|V|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1K|8|@$I|1L|J|1M|K|L]|$I|1N|J|1O|K|L]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1P|8|@$I|1Q|J|1R|K|L]]|9|@]|A|$]]|$1|10|3|11|5|D|7|1S|8|@]|9|@]|A|$E|F]]|$1|12|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|13|$]]

An up to date answer for those that are finding this question now is the following : 

<pre><code>function textNodeInnerHTML(textNode,innerHTML) {
 var div = document.createElement('div');
 textNode.parentNode.insertBefore(div,textNode);
 div.insertAdjacentHTML('afterend',innerHTML);
 div.remove();
 textNode.remove();
}
</code></pre>

The idea is to insert a newly created html element (lets say <code>var div = document.createElement('div');</code>) before the <code>textNode</code> using : 

<pre><code>textNode.parentNode.insertBefore(div,textNode);
</code></pre>

and then use :

<pre><code>div.insertAdjacentHTML(
 'afterend',
 textNode.data.replace(/lol/g,`&lt;span style="color : red"&gt;lol&lt;/span&gt;`)
) 
</code></pre>

then remove <code>textNode</code> and <code>div</code> using : 

<pre><code>textNode.remove();
div.remove();
</code></pre>

The <code>insertAdjacentHTML</code> does not destroy event listeners like <code>innerHTML</code> does .

If you want to find all text nodes that are descendants of <code>elm</code> then use :

<pre><code>[...elm.querySelectorAll('*')]
.map(l =&gt; [...l.childNodes])
.flat()
.filter(l =&gt; l.nodeType === 3);
</code></pre>

I've got a little text node:

<pre><code>var node
</code></pre>

And I want to wrap a span around every occurrence of "lol".

<pre><code>node.nodeValue = node.nodeValue.replace(/lol/, "&lt;span&gt;lol&lt;/span&gt;")
</code></pre>

It it prints out <code>"&lt;span&gt;lol&lt;span&gt;"</code> when I want <code>"lol"</code> as a span element.

Insert HTML into text node with JavaScript

我有一个小的文本节点：var node我想在每个出现"lol“的地方都加上一个跨度。node.nodeValue = node.nodeValue.replace(/lol/, "lol")当我想要"lol"作为span元素时，它会打印出"lol"。

问使用JavaScript在文本节点中插入超文本标记语言
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript在文本节点中插入超文本标记语言EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript在文本节点中插入超文本标记语言
EN