网页高亮显示文字

function hightLight(str,style,fontColor){
	var bookmark;
	if(document.createRange){
		var range = document.createRange();
	}else{
		var range = document.body.createTextRange();
		bookmark = range.getBookmark();
	}
	if(range.findText){
		range.collapse(true);
		range.moveToBookmark(bookmark);
		while(range.findText(str)){
			range.pasteHTML(range.text.fontcolor(fontColor));
		}
	}else{
		var s,n;
		s = window.getSelection();
		s.collapse(document.body,0);
		while(window.find(str)){
			var n = document.createElement("SPAN");
			n.style.cssText=style;
			s.getRangeAt(0).surroundContents(n);
		}
	}
}
function addEvent(obj, type, fn)
{
    if (obj.attachEvent)
        obj.attachEvent('on' + type, fn);
    else
        obj.addEventListener(type, fn, false);
}
addEvent(window, "load", function(){
	var searchStr = "这里是需要高亮显示的关键字";
	if(searchStr==null || searchStr=="")return;
	setTimeout(hightLight(searchStr,"border:1px solid #8900CC;color:#ACE600","#ff0000"),1000);
});

 

 

说明:实现网页特殊文字高亮显示的方式有多种,这只是其一。

另外:

1。可以使用js的replace方法(这种方式不推荐使用:<a href="...." title="关键字" alt="关键字">关键字+其他字符</a>,这时你只能替换标签块里的文本,而不能替换标签属性里的字符

2。还有可以可以在服务端生成好,再发送到web前端。

你可能感兴趣的:(Web)