js+正文规则 高亮搜索关键字

简介: 采用的:  function HighlightText(obj,keyword)   {  if(document.referrer){    var reg=new RegExp(keyword,"g"); //创建正则RegExp对象    var regdx=keyword;    var data=document.

采用的:
 function HighlightText(obj,keyword) 
 {
 if(document.referrer){
   var reg=new RegExp(keyword,"g"); //创建正则RegExp对象
   var regdx=keyword;
   var data=document.getElementById(obj).innerHTML;//替换范围获取源代码
   document.getElementById(obj).innerHTML=data.replace(reg,'<span class="cC30">'+regdx+'</span>');//根据正则表达式替换
   var reg=new RegExp(keyword.toLowerCase(),"g"); //创建正则RegExp对象
   var regdx=keyword.toLowerCase();
   var data=document.getElementById(obj).innerHTML;//替换范围获取源代码
   document.getElementById(obj).innerHTML=data.replace(reg,'<span class="cC30">'+regdx+'</span>');//根据正则表达式替换
   var reg=new RegExp(keyword.toUpperCase(),"g"); //创建正则RegExp对象 
   var regdx=keyword.toUpperCase();
   var data=document.getElementById(obj).innerHTML;//替换范围获取源代码
   document.getElementById(obj).innerHTML=data.replace(reg,'<span class="cC30">'+regdx+'</span>');//根据正则表达式替换
   }
 } 
window.onload=function(){HighlightText('news','123');};

 

 

网络资源:

 
<script type= "text/javascript" >
<!--
// 说明:获取搜索引擎关键字高亮 显示
// 整理:http://www.CodeBit.cn
 
/* http://www.kryogenix.org/code/browser/searchhi/ */
/* Modified 20021006 to fix query string parsing and add case insensitivity */
function highlightWord ( node,word ) {
// Iterate into this nodes childNodes
if ( node. hasChildNodes ) {
var hi_cn;
for ( hi_cn= 0 ;hi_cn<node. childNodes . length ;hi_cn++ ) {
highlightWord ( node. childNodes [ hi_cn ] ,word ) ;
}
}
// And do this node itself
if ( node. nodeType == 3 ) { // text node
tempNodeVal = node. nodeValue . toLowerCase ( ) ;
tempWordVal = word. toLowerCase ( ) ;
if ( tempNodeVal. indexOf ( tempWordVal ) != -1 ) {
pn = node. parentNode ;
if ( pn. className != "searchword" ) {
// word has not already been highlighted!
nv = node. nodeValue ;
ni = tempNodeVal. indexOf ( tempWordVal ) ;
// Create a load of replacement nodes
before = document. createTextNode ( nv. substr ( 0 ,ni ) ) ;
docWordVal = nv. substr ( ni,word. length ) ;
after = document. createTextNode ( nv. substr ( ni+word. length ) ) ;
hiwordtext = document. createTextNode ( docWordVal ) ;
hiword = document. createElement ( "span" ) ;
hiword. className = "searchword" ;
hiword. appendChild ( hiwordtext ) ;
pn. insertBefore ( before,node ) ;
pn. insertBefore ( hiword,node ) ;
pn. insertBefore ( after,node ) ;
pn. removeChild ( node ) ;
}
}
}
}
 
function googleSearchHighlight ( ) {
if ( !document. createElement ) return ;
ref = document. referrer ;
if ( ref. indexOf ( '?' ) == -1 ) return ;
qs = ref. substr ( ref. indexOf ( '?' ) +1 ) ;
qsa = qs. split ( '&' ) ;
for ( i= 0 ;i<qsa. length ;i++ ) {
qsip = qsa [ i ] . split ( '=' ) ;
if ( qsip. length == 1 ) continue ;
if ( qsip [ 0 ] == 'q' || qsip [ 0 ] == 'p' ) { // q= for Google, p= for Yahoo
words = unescape ( decodeURIComponent ( qsip [ 1 ] . replace ( //+/g , ' ' ) ) ) . split ( //s+/ ) ;
for ( w= 0 ;w<words. length ;w++ ) {
highlightWord ( document. getElementsByTagName ( "body" ) [ 0 ] ,words [ w ] ) ;
}
}
}
}
 
window. onload = googleSearchHighlight;
 
//-->
</script>

 

javascript控制关键字高亮显示

function SearchHighlight(mytag)  {
    
if  ( ! document.createElement)
    
{
        
return ;
    }

    var q 
=   " {{$q}} " ; // 要高亮显示的关键字
    var l  =  document.getElementsByTagName(mytag);
    
if ( ""   ==  q)  return ;
    words 
=  unescape(q.replace( /+/ g, '   ' )).split( / s +/ );
    
for  (w = 0 ;w < words.length;w ++ {
        
for (i = 0 ;i < l.length;i ++ )
        
{
            var pa 
=   new  RegExp( " ( " + words[w] + " ) " , " ig " );
            
if (l.parentNode.parentNode.parentNode.id  !=   " header " ) // 标题中的内容不替换
            l.innerHTML  =  l.innerHTML.replace(pa, " <span class= " searchword " >$1</span> " );
        }

    }

}


1、正则表达式
2、向后引用
调用方法:
document.onload = SearchHighlight(”a”);//要搜索的标签名称,这里的意思是凡是形如<a></a>的标记中的内容,包含关 键字的时候均高亮显示。然后把下面的CSS定义加到你的CSS文件里或者直接加到HTML文件中
.searchword{background-color:yellow;}
那么所有的关键字(不论大小写)将显示为黄色背景。


有待分析!

 

 

 

 


目录
相关文章
|
22天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
24天前
|
JavaScript 前端开发
JS隐式类型转换规则
【10月更文挑战第9天】 不同的 JavaScript 引擎可能在隐式类型转换的具体实现上存在一些细微差别。理解这些隐式类型转换规则对于正确处理数据和避免错误非常重要。
16 0
|
3月前
|
JavaScript 数据安全/隐私保护 Python
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
147 4
|
3月前
|
JavaScript 前端开发 安全
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
74 0
|
3月前
|
JavaScript 前端开发
JavaScript的命名规则
JavaScript的命名规则
92 0
|
3月前
|
JavaScript 前端开发
js中的命名规则
js中的命名规则
|
3月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
164 0
|
3月前
|
JavaScript
js分页+搜索
js分页+搜索
42 0
|
前端开发 JavaScript
javascript 搜索并高亮显示
2015年12月22日 15:45:08 星期二 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉 效果图: html:  1 名称: 2 代码: 3 ...
814 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
92 2