如何使用javascript突出显示文本
如何使用javascript突出显示文本
提问于 2011-12-27 20:05:56
有没有人能帮我做个javascript功能，可以突出显示网页上的文本。并且要求-只突出显示一次，而不是像我们在搜索时那样突出显示所有出现的文本。
回答 13
Stack Overflow用户
回答已采纳
发布于 2011-12-27 20:15:33
您可以使用jquery highlight effect。
但是如果你对原始的javascript代码感兴趣，看看我得到了什么，简单地复制粘贴到一个HTML中，打开文件并点击“高亮显示”-这应该会高亮显示单词"fox“。性能方面，我认为这适用于小文本和单次重复(就像您指定的那样)
function highlight(text) {
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0) {
innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;
}
}.highlight {
background-color: yellow;
}<button onclick="highlight('fox')">Highlight</button>
<div id="inputText">
The fox went over the fence
</div>
编辑：
使用replace
我看到这个答案获得了一些人气，我想我可能会补充它。您还可以轻松地使用replace
"the fox jumped over the fence".replace(/fox/,"<span>fox</span>");
或者，对于多次出现的情况(与问题无关，但在注释中被询问)，您只需在替换正则表达式上添加global。
"the fox jumped over the other fox".replace(/fox/g,"<span>fox</span>");
希望这对感兴趣的评论者有所帮助。
将HTML替换为整个网页
要替换整个网页的超文本标记语言，您应该参考文档正文的innerHTML。
document.body.innerHTML
Stack Overflow用户
发布于 2012-04-04 19:06:14
function stylizeHighlightedString() {
var text = window.getSelection();
// For diagnostics
var start = text.anchorOffset;
var end = text.focusOffset - text.anchorOffset;
range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var span = document.createElement("span");
span.appendChild(selectionContents);
span.style.backgroundColor = "yellow";
span.style.color = "black";
range.insertNode(span);
}Stack Overflow用户
发布于 2015-01-20 17:35:19
下面是我的正则表达式纯JavaScript解决方案：
function highlight(text) {
document.body.innerHTML = document.body.innerHTML.replace(
new RegExp(text + '(?!([^<]+)?<)', 'gi'),
'<b style="background-color:#ff0;font-size:100%">$&</b>'
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8644428
复制相关文章
相似问题