网页高亮显示文字

最新推荐文章于 2025-04-18 09:45:26 发布

最新推荐文章于 2025-04-18 09:45:26 发布 · 420 阅读

文章标签：

#Web

js相关专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种利用JavaScript实现网页中特定文字高亮显示的方法。该方法通过查找并替换页面上的指定文本，使其以特定样式突出显示。此外，还探讨了其他实现方式，如使用JavaScript的replace方法及在服务端生成高亮内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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前端。