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;}
那么所有的关键字(不论大小写)将显示为黄色背景。


有待分析!

 

 

 

 


目录
相关文章
|
9天前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
1月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
JavaScript 前端开发 Java
JS中的隐式类型转换规则
JavaScript 是一门弱类型语言,变量类型在运行时会进行隐式转换。本文总结了常见的隐式转换规则,包括运算符转换、等号比较和布尔值转换等。例如,`1 + {a: 1}` 会先调用对象的 `toString()` 方法,最终结果为 `&#39;1[object Object]&#39;`。此外,还详细解析了 `undefined` 和 `null` 的运算行为,以及 `![] == []` 等特殊情况。通过这些例子,帮助开发者更好地理解 JavaScript 中的类型转换机制。
JS中的隐式类型转换规则
|
5月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
74 5
|
5月前
|
前端开发 JavaScript 开发者
除了 async/await 关键字,还有哪些方式可以在 JavaScript 中实现异步编程?
【10月更文挑战第30天】这些异步编程方式在不同的场景和需求下各有优劣,开发者可以根据具体的项目情况选择合适的方式来实现异步编程,以达到高效、可读和易于维护的代码效果。
|
6月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
160 1
|
6月前
|
JavaScript 前端开发
JS隐式类型转换规则
【10月更文挑战第9天】 不同的 JavaScript 引擎可能在隐式类型转换的具体实现上存在一些细微差别。理解这些隐式类型转换规则对于正确处理数据和避免错误非常重要。
46 0
|
7月前
|
JavaScript 前端开发 Java
JavaScript 保留关键字
JavaScript 保留关键字
48 2
|
7月前
|
JavaScript 前端开发
JavaScript this 关键字
JavaScript this 关键字
34 1
|
9月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
164 2