使用jQuery突出显示单词
基本上，我需要突出显示文本块中的特定单词。例如，假设我想在下面的文本中突出显示单词"dolor“：
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>如何将上面的代码转换为下面这样的代码：
<p>
Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>使用jQuery可以做到这一点吗？
编辑：作为Sebastian pointed out，这在没有jQuery的情况下是很有可能的-但我希望有一种特殊的jQuery方法可以让你在文本本身上做选择器。我已经在这个网站上大量使用jQuery了，所以把所有东西都包装在jQuery中会让事情变得更整洁一些。
回答 11
Stack Overflow用户
发布于 2008-09-23 10:03:12
function hiliter(word, element) {
var rgxp = new RegExp(word, 'g');
var repl = '<span class="myClass">' + word + '</span>';
element.innerHTML = element.innerHTML.replace(rgxp, repl);
}
hiliter('dolor');Stack Overflow用户
发布于 2015-09-24 18:08:56
为什么使用自制的突出显示功能是个坏主意
为什么从头开始构建你自己的高亮功能可能不是一个好主意，因为你肯定会遇到别人已经解决的问题。挑战：
例如，如果你想移除高亮显示的元素，你需要移除带有元素的文本节点，以突出显示匹配的内容，而不会破坏DOM事件并一次又一次地触发DOM重新生成(例如，对于
- ，你想移除突出显示的元素，你将不得不移除带有其内容的HTML元素，还必须组合拆分的文本节点以进行进一步的搜索。这是必要的，因为每个荧光笔插件都在文本节点内搜索匹配的内容，如果你的关键字被分成几个文本节点，它们将不会被找到。
- 你还需要构建测试，以确保你的插件在你没有考虑过的情况下工作。我说的是跨浏览器测试！
听起来很复杂？如果你想要一些功能，比如忽略高亮显示中的一些元素，发音符号映射，同义词映射，在iframe中搜索，分词搜索等，这会变得越来越复杂。
使用现有插件
当使用现有的、实现良好的插件时，您不必担心上面提到的事情。Sitepoint上的文章比较了流行的荧光笔插件。这包括这个问题的答案插件。
看一看mark.js
mark.js就是这样一个用纯JavaScript编写的插件，但也可以作为jQuery插件使用。它的开发目的是提供比其他插件更多的机会，并提供以下选项：
- 单独搜索关键字，而不是完整的术语
- 映射变音符号(例如，如果“synonyms
- search”还应与自定义元素内的"justò")
- ignore匹配
- 使用自定义突出显示元素
- 使用自定义突出显示类
<代码>H123映射自定义synonyms
- search也未找到术语<代码>H228<代码>F229
或者，您可以查看this fiddle。
用法示例
// Highlight "keyword" in the specified context
$(".context").mark("keyword");
// Highlight the custom regular expression in the specified context
$(".context").markRegExp(/Lorem/gmi);它是在GitHub (project reference)上免费开发的开源软件。
Stack Overflow用户
发布于 2010-04-20 23:49:46
下面是一个忽略并保留大小写的变体：
jQuery.fn.highlight = function (str, className) {
var regex = new RegExp("\\b"+str+"\\b", "gi");
return this.each(function () {
this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
});
};https://stackoverflow.com/questions/119441
复制相似问题