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


有待分析!

 

 

 

 


目录
相关文章
|
1天前
|
存储 JavaScript 前端开发
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
6 0
|
1天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
8 1
|
4天前
|
JavaScript
js的一些运算符规则
js的一些运算符规则
10 1
|
8天前
|
JavaScript 前端开发
JavaScript 关键字
【5月更文挑战第2天】JavaScript 关键字。
17 2
|
11天前
|
JavaScript 前端开发
JavaScript模糊搜索功能
JavaScript模糊搜索功能
|
12天前
|
JavaScript 前端开发
javascript中new关键字的本质是什么
javascript中new关键字的本质是什么
|
14天前
|
JavaScript 前端开发 数据安全/隐私保护
|
17天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
8 1
|
29天前
|
存储 JavaScript 前端开发
使用JavaScript实现复杂功能:一个完整的电商网站搜索功能
使用JavaScript实现复杂功能:一个完整的电商网站搜索功能
|
2月前
|
JavaScript 前端开发 开发者
js开发:请解释什么是ES6的let和const关键字,以及它们与var关键字的区别。
ES6引入`let`和`const`替代`var`声明变量。`let`有块级作用域,存在暂时性死区,不进行变量提升,可重新赋值。`const`用于常量,值不可变但引用类型内容可变,同样有块级作用域和暂时性死区。与`var`主要区别在于作用域、变量提升和可变性。这些改进提高了代码的可预测性和安全性。
27 2