gpt4 book ai didi

javascript - 高效地突出显示文档中的文本(JavaScript)

转载 作者:行者123 更新时间:2023-11-30 08:59:21 24 4
gpt4 key购买 nike

我怎样才能(有效地 - 不减慢计算机 [cpu])突出显示页面的特定部分?

假设我的页面是这样的:

<html>
<head>
</head>
<body>
"My generic words would be selected here" !.
<script>
//highlight code here
var textToHighlight = 'selected here" !';
//what sould I write here?
</script>
</body>
</html>

我的想法是将所有正文“克隆”到一个变量中并通过 indexOf 找到指定的文本,更改(插入具有背景色的跨度)“克隆”字符串并将“真实”正文替换为“克隆”一个。
我只是觉得效率不高。
你还有其他建议吗? (有创意 :) )

最佳答案

我从我对 SO ( example ) 上几个类似问题的回答中改编了以下内容。它被设计为可重复使用,并已被证明是这样。它在您指定的容器节点内遍历 DOM,在每个文本节点中搜索指定的文本,并使用 DOM 方法拆分文本节点并将相关文本 block 包围在样式 <span> 中。元素。

演示:http://jsfiddle.net/HqjZa/

代码:

// Reusable generic function
function surroundInElement(el, regex, surrounderCreateFunc) {
// script and style elements are left alone
if (!/^(script|style)$/.test(el.tagName)) {
var child = el.lastChild;
while (child) {
if (child.nodeType == 1) {
surroundInElement(child, regex, surrounderCreateFunc);
} else if (child.nodeType == 3) {
surroundMatchingText(child, regex, surrounderCreateFunc);
}
child = child.previousSibling;
}
}
}

// Reusable generic function
function surroundMatchingText(textNode, regex, surrounderCreateFunc) {
var parent = textNode.parentNode;
var result, surroundingNode, matchedTextNode, matchLength, matchedText;
while ( textNode && (result = regex.exec(textNode.data)) ) {
matchedTextNode = textNode.splitText(result.index);
matchedText = result[0];
matchLength = matchedText.length;
textNode = (matchedTextNode.length > matchLength) ?
matchedTextNode.splitText(matchLength) : null;
surroundingNode = surrounderCreateFunc(matchedTextNode.cloneNode(true));
parent.insertBefore(surroundingNode, matchedTextNode);
parent.removeChild(matchedTextNode);
}
}

// This function does the surrounding for every matched piece of text
// and can be customized to do what you like
function createSpan(matchedTextNode) {
var el = document.createElement("span");
el.style.backgroundColor = "yellow";
el.appendChild(matchedTextNode);
return el;
}

// The main function
function wrapText(container, text) {
surroundInElement(container, new RegExp(text, "g"), createSpan);
}

wrapText(document.body, "selected here");

关于javascript - 高效地突出显示文档中的文本(JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10618238/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com