通过Jquery实现文本高亮及取消高亮

1.首先确定高亮样式

.highlight {color: red; }

2.高亮方法text是文本内容,words关键字,tag为自定义标签

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;
    }

3.获取页面节点调用方法,该节点存在多个相同的用each循环调用

var elements = $(".sewageCheckjianhua");
            var keywords = name.replace(/(\s,|,\s)/g, ',').split(',');
            elements.each(function () {
                $(this).html(highlight($(this).html(),keywords));
            })

4.效果

5.取消高亮;text文本,tag自定义标签

function unhighlight(text, tag) {
	// 默认的标签,如果没有指定,使用span
	tag = tag || 'span';
	var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g');
	return text.replace(re, '');
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章