基本上,我需要突出显示文本块中的特定单词。例如,假设我想在下面的文本中突出显示单词"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中会让事情变得更整洁一些。
发布于 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');
发布于 2015-09-24 18:08:56
为什么使用自制的突出显示功能是个坏主意
为什么从头开始构建你自己的高亮功能可能不是一个好主意,因为你肯定会遇到别人已经解决的问题。挑战:
例如,如果你想移除高亮显示的元素,你需要移除带有元素的文本节点,以突出显示匹配的内容,而不会破坏DOM事件并一次又一次地触发DOM重新生成(例如,对于
听起来很复杂?如果你想要一些功能,比如忽略高亮显示中的一些元素,发音符号映射,同义词映射,在iframe中搜索,分词搜索等,这会变得越来越复杂。
使用现有插件
当使用现有的、实现良好的插件时,您不必担心上面提到的事情。Sitepoint上的文章比较了流行的荧光笔插件。这包括这个问题的答案插件。
看一看mark.js
mark.js就是这样一个用纯JavaScript编写的插件,但也可以作为jQuery插件使用。它的开发目的是提供比其他插件更多的机会,并提供以下选项:
<代码>H123映射自定义synonyms
或者,您可以查看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)上免费开发的开源软件。
发布于 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
复制相似问题