有很多jQuery插件可以实现文本高亮，这里使用一个简单的方法，实现高亮，不需要其他JavaScript包，只是纯净的JavaScript，这个脚本返回被处理的原始数据，高亮的文本用标签包含起来，可以使用css定义样式。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function highlight(text, words, tag) { // 默认的标签，如果没有指定，使用span tag = tag || 'span'; var i, len = words.length, re; for (i = 0; i < len; i++) { // 正则匹配所有的文本 re = new RegExp(words[i], 'g'); if (re.test(text)) { text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>'); } } return text; } |
将高亮文本还原
|
1 2 3 4 5 6 |
function unhighlight(text, tag) { // 默认的标签，如果没有指定，使用span tag = tag || 'span'; var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g'); return text.replace(re, ''); } |
使用方法：
|
1 2 3 4 5 |
$('p').html( highlight( $('p').html(), //替换的文本 ['foo', 'bar', 'baz', 'hello world'], //高亮的文本数组 'strong' //自定义标签 )); |
演示：高亮文本
大神，您好！
非常佩服您写的代码，但是有个问题想找您沟通一下。
代码中如果是标签id内，class内的关键字，一样是可以被高亮的，这个怎么修改呢。
举个例子：
我需要高亮小牛
小牛
这时候，id里的小牛，和文本 小牛，都会被高亮，这不是我想要的效果
方法highlight(text, words, tag)的参数text，传参数时，将text的id，class的属性去掉，可以使用jQuery的text()
如果图片里有关键字呢？比如我想高亮:1
那么如果img的src属性里有1的都会被高亮出来了！！
可以获取图片src的值，作为highlight的参数text，再调用此方法