<script type="text/javascript">
//<![CDATA[
//--------begin function fHl(o, flag, rndColor, url)------------------//
function fHl(o, flag, rndColor, url){
/// <summary>
/// 使用 javascript HTML DOM 高亮显示页面特定字词.
/// 实例:
/// fHl(document.body, '纸伞|她');
/// 这里的body是指高亮body里面的内容。
/// fHl(document.body, '希望|愁怨', false, '/');
/// fHl(document.getElementById('at_main'), '独自|飘过|悠长', true, 'search.asp?keyword=');
/// 这里的'at_main'是指高亮id='at_main'的div里面的内容。search.asp?keyword=指给关键字加的链接地址,
/// 我这里加了一个参数,在后面要用到。可以是任意的地址。
/// </summary>
/// <param name="o" type="Object">
/// 对象, 要进行高亮显示的对象.
/// </param>
/// <param name="flag" type="String">
/// 字符串, 要进行高亮的词或多个词, 使用 竖杠(|) 分隔多个词 .
/// </param>
/// <param name="rndColor" type="Boolean">
/// 布尔值, 是否随机显示文字背景色与文字颜色, true 表示随机显示.
/// </param>
/// <param name="url" type="String">
/// URI, 是否对高亮的词添加链接.
/// </param>
/// <return></return>
var bgCor=fgCor='';
if(rndColor){
bgCor=fRndCor(10, 20);
fgCor=fRndCor(230, 255);
} else {
bgCor='#F0F';
fgCor='black';
}
var re=new RegExp(flag, 'i');
for(var i=0; i<o.childNodes.length; i++){
var o_=o.childNodes[i];
var o_p=o_.parentNode;
if(o_.nodeType==1) {
fHl(o_, flag, rndColor, url);
} else if (o_.nodeType==3) {
//if(!(o_p.nodeName=='A')){
if(o_.data.search(re)==-1)continue;
var temp=fEleA(o_.data, flag);
o_p.replaceChild(temp, o_);
//}
}
}
//------------------------------------------------
function fEleA(text, flag){
var style=' style="background-color:'+bgCor+';color:'+fgCor+';" '
var o=document.createElement('span');
var str='';
var re=new RegExp('('+flag+')', 'gi');
if(url){
str=text.replace(re, '<a href="'+url+
'$1"'+style+'>$1</a>'); //这里是给关键字加链接,红色的$1是指上面链接地址后的具体参数。
} else {
str=text.replace(re, '<span '+style+'>$1</span>'); //不加链接时显示
}
o.innerHTML=str;
return o;
}
//------------------------------------------------
function fRndCor(under, over){
if(arguments.length==1){
var over=under;
under=0;
}else if(arguments.length==0){
var under=0;
var over=255;
}
var r=fRandomBy(under, over).toString(16);
r=padNum(r, r, 2);
var g=fRandomBy(under, over).toString(16);
g=padNum(g, g, 2);
var b=fRandomBy(under, over).toString(16);
b=padNum(b, b, 2);
//defaultStatus=r+' '+g+' '+b
return '#'+r+g+b;
function fRandomBy(under, over){
switch(arguments.length){
case 1: return parseInt(Math.random()*under+1);
case 2: return parseInt(Math.random()*(over-under+1) + under);
default: return 0;
}
}
function padNum(str, num, len){
var temp=''
for(var i=0; i<len;temp+=num, i++);
return temp=(temp+=str).substr(temp.length-len);
}
}
}
//--------end function fHl(o, flag, rndColor, url)--------------------//
//]]>
</script>
记录一下
分享到:
相关推荐
工作之后整理的关于前端页面,高亮显示搜索到的文字的例子。
使用sublime编写vue时,可以让vue.js代码高亮显示的插件,
介绍了JS将搜索的关键字高亮显示实现代码,有需要的朋友可以参考一下
highlight.js是一个高亮显示插件,可实现网页上的搜索关键词高亮显示,如示例演示,在文本框中输入搜索的关键字,下面的一段文字中,所有出现搜索词的地方,都会被高亮显示,醒目的将结果显示给用户,而且使用起来...
6 对括号{}〔〕()可以高亮配对显示,方便查看(仅对英文符号有效) 7 可以自定义代码页和字符集,对中文支持良好 8 使用标准的正则表达式搜索和替换 9 可以使用半透明模式,cool 10 快速放大、缩小页面,不用...
实现JS多关键词高亮方法,可以改造查询条件直接引用该JS方法使用,更加简单简洁实现查询高亮关键词。多关键词当前以空格隔开演示。
通过js实现当前页面搜索文字高亮,挺好用的,项目用到搜索高亮,要前端实现,我也是找了好久确定用这个包,感谢原分享者,想免费分享这个包,为何资源分数最低为1
适合做网站上会员头像排列效果,当鼠标悬停在头像上,当前头像高亮显示,并显示对应的文字说明,效果很不错 使用方法: 1、在网页head中引入lanrenzhijia.css样式以及jquery库 2、将html代码复制到你...
页内搜索并高亮定位网上有很多代码的例子,都是一样的,主要是用js实现的,下载下来之后,在页顶部若有多余字符第二次定位搜索会出现"{searchHL}",但楼主是用C#,顶部有声明信息,于是修改了下代码,还好解决了这个...
高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色。一般在搜索结果页面会经常用到这个功能。 下面就为大家提供一种解决方案,用javascript实现。 首先在<head>中引入下面javascript...
js获取页面控件坐标.pdf
jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要修改JS代码为数组,这样可过滤出多个不同的关键字,本例只是为你演示一个基本的功能,更多过滤功能请自己挖掘吧。...
高亮红色的纯CSS网站导航菜单代码,默认状态下菜单是深灰色的,当鼠标放在任意一个菜单文字上时,该菜单背景变红色,高亮显示,变得光彩夺目,色彩对比强烈起来,高亮显示的菜单项也可很好的向用户指引当前的位置,...
一款文字高亮过滤插件,可以实现用户输入字符后页面上指定区域高亮显示,当然此插件也可以部分代替浏览器自带的搜索功能。
pdfjs_1.1.159内添加在指定页码使用关键词进行在当前页面进行检索,并且可选所有关键词高亮
最近需要给HTML5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统“复制”菜单,用户可以点击“复制”进行复制操作,然后粘贴到App...包括模拟focus input,JavaScript Selection, 使用a标签尝
在部分系统中, 使用文字高亮方案, 输入部分特殊字符程序会崩溃. 例如批处理高亮方案中,在文本输入“for %%”程序出错的现象. 【基本介绍】 这是一个用来取代 Notepad 的免费程序。绿色软件,安装完毕后只有一个主...
摘要:脚本资源,jQuery,tinybox,lightbox,高亮弹出框 JS网页高亮框插件,一个使用jquery实现的高亮弹出框插件tinybox,可以实现文字、图片、普通html内容的高亮弹出显示,可以设置弹出框自动关闭时间,可以通过ajax...
查看按单词分组的所有突出显示的单词的页面,单击后将显示所有带有突出显示单词的博客,并且这也是突出显示单词之前和之后的原始文本的摘要版本 单击突出显示的单词进入实际的博客文章 响应式和整洁的用户界面 ...
用WebView打开Http://www.baidu.co网页 在搜索框输入需要搜索的内容 点击百度一下按钮 得到框内文字 。