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


有待分析!

 

 

 

 


目录
相关文章
|
3月前
|
JavaScript 前端开发
js中模糊搜索 模糊匹配如何实现?
js中模糊搜索 模糊匹配如何实现?
|
3月前
|
前端开发 JavaScript
百度搜索:蓝易云【用JavaScript和HTML实现一个精美的计算器网页】
该计算器网页使用HTML定义了页面结构,CSS样式使其具有精美的外观,而JavaScript脚本实现了计算器的逻辑。用户可以通过按钮输入数字和操作符,并通过“=”按钮来进行计算,计算结果会显示在文本框中。
40 6
|
2天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
7 1
|
1月前
|
JavaScript 前端开发 开发者
js开发:请解释什么是ES6的let和const关键字,以及它们与var关键字的区别。
ES6引入`let`和`const`替代`var`声明变量。`let`有块级作用域,存在暂时性死区,不进行变量提升,可重新赋值。`const`用于常量,值不可变但引用类型内容可变,同样有块级作用域和暂时性死区。与`var`主要区别在于作用域、变量提升和可变性。这些改进提高了代码的可预测性和安全性。
24 2
|
1月前
|
JavaScript 前端开发 算法
JavaScript 关键字 debugger 的作用和使用场景介绍
JavaScript 关键字 debugger 的作用和使用场景介绍
35 0
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 064 JavaScript 语言规则
编程笔记 html5&css&js 064 JavaScript 语言规则
|
3月前
|
JavaScript
|
3月前
|
JavaScript Ubuntu 前端开发
百度搜索:蓝易云【ubuntu安装开发javascript ubuntu script教程】
现在,你已经在Ubuntu上成功安装了JavaScript开发环境,可以开始编写和运行JavaScript代码了。注意,在编写代码之前,建议先创建一个项目文件夹,并在其中初始化npm,这样你可以管理项目的依赖项和配置。
33 5
|
3月前
|
缓存 自然语言处理 JavaScript
闭包,事件循环以及js校验规则
闭包,事件循环以及js校验规则