`
huanyq2008
  • 浏览: 166524 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

网页高亮显示文字

Web 
阅读更多
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前端。

分享到:
评论

相关推荐

    vue高亮显示插件

    使用sublime编写vue时,可以让vue.js代码高亮显示的插件,

    质感时间轴帝国CMS模板以黑色为主色,添加了彩色作为网页的一个亮点,导航高亮显示、banner图片鼠标划过,可以看到隐藏的文字。

    质感时间轴帝国CMS模板以黑色为主色,添加了彩色作为网页的一个亮点,导航高亮显示、banner图片鼠标划过,可以看到隐藏的文字。质感时间轴帝国CMS模板以黑色为主色,添加了彩色作为网页的一个亮点,导航高亮显示、...

    highlight.js实现网页关键词高亮显示

    highlight.js是一个高亮显示插件,可实现网页上的搜索关键词高亮显示,如示例演示,在文本框中输入搜索的关键字,下面的一段文字中,所有出现搜索词的地方,都会被高亮显示,醒目的将结果显示给用户,而且使用起来...

    用JS将搜索的关键字高亮显示实现代码

    介绍了JS将搜索的关键字高亮显示实现代码,有需要的朋友可以参考一下

    质感时间轴帝国CMS模板以黑色为主色,添加了彩色作为网页的一个亮点,导航高亮显示、banner图片鼠标划过,可以看到隐藏的文字

    质感时间轴帝国CMS模板以黑色为主色,添加了彩色作为网页的一个亮点,导航高亮显示、banner图片鼠标划过,可以看到隐藏的文字。css3动画应用在banner和右边“我的名片”个人信息。.rar

    jQuery实现高亮显示网页关键词的方法

    本文实例讲述了jQuery实现高亮显示网页关键词的方法。分享给大家供大家参考。具体如下: 这是一款基于jquery实现的高亮显示网页上搜索关键词的代码,当你在文本框中输入的时候,如果...jquery文字高亮显示&lt;/title

    jquery鼠标悬停头像高亮显示说明效果

    适合做网站上会员头像排列效果,当鼠标悬停在头像上,当前头像高亮显示,并显示对应的文字说明,效果很不错 使用方法: 1、在网页head中引入lanrenzhijia.css样式以及jquery库 2、将html代码复制到你...

    jQuery过滤HTML标签并高亮显示关键字的方法

    本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法。分享给大家供大家参考。具体如下: jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要修改JS代码为数组,这样可...

    C# 检索不区分大小写并高亮显示实例详解

    C# 检索不区分大小写并高亮显示实例详解  今日,碰到一个问题:如何在网页中高亮显示不区分... 以上文字转自大牛“万仓一黍“的文章–”高亮显示不区分大小写的关键字——ASP“。  但是他的文章写得是ASP版本,今天

    高亮红色的纯CSS网站导航菜单代码.rar

    高亮红色的纯CSS网站导航菜单代码,默认状态下菜单是深灰色的,当鼠标放在任意一个菜单文字上时,该菜单背景变红色,高亮显示,变得光彩夺目,色彩对比强烈起来,高亮显示的菜单项也可很好的向用户指引当前的位置,...

    tinybox JS网页高亮弹出框插件

    摘要:脚本资源,jQuery,tinybox,lightbox,高亮弹出框 JS网页高亮框插件,一个使用jquery实现的高亮弹出框插件tinybox,可以实现文字、图片、普通html内容的高亮弹出显示,可以设置弹出框自动关闭时间,可以通过ajax...

    网页分析专用工具~!

    “放大“、“缩小”和“高亮度显示文字”功能方便您在 演示的时候更好的标示重点,等等。 WebPage Spy还将常用的IE配置功能通过菜单的方式提供,您只要点击一下就可以达到目的, 再也不用总是进入“工具/...

    检测文件格式、高亮字 V2.0

    通过批量检测本地文件和网页的高亮字,这对于做英文站来说及其重要,以避免页面出现中文字等,这将在老外的电脑显示???或口口口的乱码。 而http://www.bestchinahotel.com/的英文站,就做了以上这2个检测,保证了...

    天使朗读浏览器 v2.50.zip

    网页朗读模式可以对网页全部内容、鼠标选择内容、高亮显示内容进行提取、替换和朗读。值得一提的是软件还可以同时可以将文字批量转换为声音文件,是用户实现多功能网页浏览浏览的好帮手。需要的朋友快来下载吧! ...

    淘宝搜索框(和淘宝网页的输入框一样的效果).zip

    和淘宝网页的输入框一模一样的效果,在输入框输入文字的时候(不是鼠标聚焦和点击的时候),默认图标放大镜和默认文字消失,在输入框没有输入文字但焦点还在的时候,默认图标和默认文字出现

    违规停车网页移动端的设计

    Notepad++功能比 Windows 中的记事本强大,除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码。Notepad++ 不仅有语法高亮度显示,也有语法折叠功能,并且支持宏以及扩充基本功能的外挂模组。 ...

    Text Tools(文字处理工具V2.56)

    对齐原文和译文、复制多个窗口的文字、分开中(法)英文、中英文字符之间添加空格、Word文档内连接断行、高亮显示数字、清除DejaVu标签、Word原文和译文段段/整页对照、提取高频词(术语)、自动调用谷歌和有道翻译...

    高亮工具「Highlight tool」-crx插件

    使用跳转和正则表达式突出显示工具 使用常规文本或RegExp快速突出显示网页中的文字。 按Ctrl + j移至下一个匹配项,按Ctrl + k移动上一个匹配项。 支持语言:English

    EditPlus 3.51免注册简体中文版.zip

    EditPlus 3.51一款可以完美取代系统自带记事本的文字处理软件,同时它也是网页及程序设计师所必不可少的工具支持多种编程语言语法高亮着色显示,支持html/asp/php/java/c /css/javascript等语法高亮显示。内置网页...

    《精通CSS+DIV网页样式与布局》光盘源码

     13.3 实例一:输入时高亮显示的Excel表格   13.4 实例二:由远到近的文字   13.5 实例三:跑马灯特效   13.6 实例四:图片淡入淡出   13.7 实例五:CSS实现PPT幻灯片   13.8 实例六:灯光效果  ...

Global site tag (gtag.js) - Google Analytics