`
dcdc723
  • 浏览: 183658 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

高亮关键字(javascript+html)

阅读更多
使用时传递要高亮的关键字如: XXX.htm?key=杜川 
可为关键字加链接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns=" http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>shawl.qiu template</title> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function Request(strName) 
{ 
var strHref = window.document.location.href; 
var intPos = strHref.indexOf("?"); 
var strRight = strHref.substr(intPos + 1); 

var arrTmp = strRight.split("&"); 
for(var i = 0; i < arrTmp.length; i++) 
{ 
var arrTemp = arrTmp[i].split("="); 

if(arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1]; 
} 
return ""; 
} 
//参数
var keyword=Request("key"); 
//document.write(id); 
//--> 
</SCRIPT>
<script type="text/javascript"> 
//<![CDATA[ 
    onload=function(){ 
        fHl(document.body, keyword); 
       // fHl(document.body, '丁香|雨巷', true); 
         
      //  fHl(document.body, '希望|愁怨', false, '/'); 
       // fHl(document.getElementById('at_main'), '独自|飘过|悠长', true, '/'); 
		 fHl(document.body, keyword, false, 'http://dcdc723.iteye.com?key='+keyword);
		 // fEleA(document.body,'kt');
         
/*         fHl(document.body, '纸伞'); 
        fHl(document.body, '她', false, '/'); 
        fHl(document.body, '丁香', true, '/'); 
        fHl(document.body, '雨巷', true, '/'); 
         
        fHl(document.body, '希望', false); 
        fHl(document.body, '愁怨', true); */ 
         
/*         fHl(document.body, '丁香', 'blue', 'white', '/'); 
        fHl(document.body, '雨巷', 'gray', 'white', '/'); 
        fHl(document.body, '独自', 'white', 'red'); 
        fHl(document.body, '悠长', 'white', 'red'); 
        fHl(document.body, '飘过'); */ 
    } 
    /*----------------------------------------*\ 
     * 使用 javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu 
     * 参数说明: 
     * o: 对象, 要进行高亮显示的对象. 
     * flag: 字符串, 要进行高亮的词或多个词, 使用 竖杠(|) 分隔多个词 . 
     * rndColor: 布尔值, 是否随机显示文字背景色与文字颜色, true 表示随机显示. 
     * url: URI, 是否对高亮的词添加链接.  
    \*----------------------------------------*/ 
    //--------begin function fHl(o, flag, rndColor, url)------------------// 
    function fHl(o, flag, rndColor, url){ 
        var bgCor=fgCor=''; 
        if(rndColor){ 
            bgCor=fRndCor(10, 20); 
            fgCor=fRndCor(230, 255); 
        } else { 
            bgCor='yellow'; 
            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_); 
                } 
            }  // shawl.qiu script 
        } 
		
        //------------------------------------------------ 
        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+'"'+style+'>$1</a>'); 
            } else { 
                str=text.replace(re, '<span '+style+'>$1</span>'); 
            } 
            o.innerHTML=str; 
            return o; 
        }     // shawl.qiu script 
        //------------------------------------------------ 
        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; 
                } 
            } // shawl.qiu script 
            function padNum(str, num, len){ 
                var temp='' 
                for(var i=0; i<len;temp+=num, i++); 
                return temp=(temp+=str).substr(temp.length-len); 
            } // shawl.qiu script 
        } 
    } // shawl.qiu script 
    //--------end function fHl(o, flag, rndColor, url)--------------------// 
//]]> 
</script> 
</head> 
<body> 
<div class="at_main" id="at_main"><p/><b>CITE:</b><cite><div class=u_cite>戴望舒写女孩<br/> 
<br/> 杜川杜川杜川杜川杜川杜川杜川杜川杜川杜川杜  杜川川杜川kt1 川1杜川
&nbsp;雨  巷&nbsp;<br/> 
撑着油纸伞,独自&nbsp;<br/> 
彷徨在悠长、悠长&nbsp;<br/> 
又寂寥的雨巷,&nbsp;<br/> 
我希望逢着&nbsp;<br/> 
一个丁香一样地&nbsp;<br/> 
结着愁怨的姑娘。&nbsp;<br/> 
她是有&nbsp;<br/> 
丁香一样的颜色,&nbsp;<br/> 
丁香一样的芬芳,&nbsp;<br/> 
丁香一样的忧愁,&nbsp;<br/> 
在雨中哀怨,&nbsp;<br/> 
哀怨又彷徨;&nbsp;<br/> 
她彷徨在这寂寥的雨巷,&nbsp;<br/> 
撑着油纸伞&nbsp;<br/> 
像我一样,&nbsp;<br/> 
像我一样地&nbsp;<br/> 
默默踟躇着&nbsp;<br/> 
冷漠、凄清,又惆怅。&nbsp;<br/> 
她默默地走近,&nbsp;<br/> 
走近,又投出&nbsp;<br/> 
叹息一般的眼光&nbsp;<br/> 
她飘过&nbsp;<br/> 
像梦一般地,&nbsp;<br/> 
像梦一般地凄婉迷茫。&nbsp;<br/> 
像梦中飘过&nbsp;<br/> 
一枝丁香地,&nbsp;<br/> 
我身旁飘过这个女郎;&nbsp;<br/> 
她默默地远了,远了,&nbsp;<br/> 
到了颓圮的篱墙,&nbsp;<br/> 
走尽这雨巷。&nbsp;<br/> 
在雨的哀曲里,&nbsp;<br/> 
消了她的颜色,&nbsp;<br/> 
散了她的芬芳,&nbsp;<br/> 
消散了,甚至她的&nbsp;<br/> 
叹息般的眼光&nbsp;<br/> 
丁香般的惆怅。&nbsp;<br/> 
撑着油纸伞,独自&nbsp;<br/> 
彷徨在悠长、悠长&nbsp;<br/> 
又寂寥的雨巷,&nbsp;<br/> 
我希望飘过&nbsp;<br/> 
一个丁香一样地&nbsp;<br/> 
结着愁怨的姑娘。</div></cite></div> 
</body> 
</html> 

 

2
0
分享到:
评论

相关推荐

    jquerymark强大的jQuery关键字文本高亮插件

    jquery.mark是一款功能强大的jQuery关键字文本高亮插件。它支持变音符号,同义词,自定义元素,自定义class名称,单词边界和iframe。它可以通过搜索的方式来高亮所有的指定关键字。

    原生JavaScript字体高亮.html

    javascript设置字体高亮 字体高亮一般用在网站搜索的时候,通常我们会把搜索出来的文字设置成高亮,像百度搜索出来的一样,搜索关键字会变成红色高亮。下面通过javascript把字符串中的指定文字设置高亮。

    jQuery过滤HTML标签并高亮显示关键字的方法

    本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法。分享给大家供大家参考。具体如下: jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要修改JS代码为数组,这样可...

    精通JavaScript+jQuery Part1

     13.3 实例一:输入时高亮显示的Excel表格   13.4 实例二:由远到近的文字   13.5 实例三:跑马灯特效   13.6 实例四:图片淡入淡出   13.7 实例五:CSS实现PPT幻灯片   13.8 实例六:灯光效果  ...

    JavaScript简单实现关键字文本搜索高亮显示功能示例

    本文实例讲述了JavaScript简单实现关键字文本搜索高亮显示功能。分享给大家供大家参考,具体如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    javascript 关键字高亮显示实现代码

    关键字高亮显示 软件开发网是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的...

    Angularjs实现搜索关键字高亮显示效果

    根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析:  1、每次执行搜索操作,需清空上一次结果  2、需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: ...

    WPF 语法高亮 编辑器

    WPF4上使用的语法高亮文本编辑器。...控件原生支持的语法有:ASP.NET,Boo, Coco/R grammars, C++, C#, HTML, Java, JavaScript, Patch files, PHP, TeX, VB 以及 XML。控件的介绍和使用方法,请google或参考以下文章: ...

    sql-highlight:一个用纯 JavaScript 编写的简单轻量级的 SQL 语法高亮库

    SQL 语法高亮一个用纯 JavaScript 编写的简单轻量级的 SQL 语法高亮库这到底是怎么回事? SQL Highlight 是一个突出 SQL 查询的小包。 它既可以输出到带有 Unicode 转义序列的终端,也可以输出到普通的 HTML。 哦,...

    ultraedit 各种语法高亮着色官方文档(比如makefile语法)

    默认可能已经有九个配置:/L1"C/C++"表示c的高亮,最后/L9"JavaScript"是JavaScript的高亮配置。 现在我们添加其他文件类型的查看方式,添加 Makefile 的查看方式 打开这个文件UltraEdit\WORDFILE.uew,可以...

    Notepad++ V4.82 Final 简体 免安装 优秀文本处理工具、27种语法高亮显示

    Notepad++ 是一款非常有特色的编辑器,是开源软件,可以免费使用。 &lt;br&gt;功能有: ①、内置支持多达 27 种语法高亮度显示... 支持的语言: C, C++ , Java , C#, XML, HTML, PHP, Javascript , ! &lt;br&gt;

    Notepad++(高亮代码记事本)

    支持的语言: C, C++ , Java , C#, XML, HTML, PHP, Javascript ,Assembly, RC resource file, makefile, ASCII art file (extension .nfo , screenshot1, screenshot2), doxygen, ini file, batch file, ASP , VB/...

    《JavaScript实例精通》[源代码]

    6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm 使用匿名函数为定时器传递参数。 6_5.htm Web页面中的tooltip提示。 6_6.htm 在Web页面中控制其元素的选择状态。 第7章(\7) 示例描述:JavaScript的...

    JavaScript实例精通

    6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm 使用匿名函数为定时器传递参数。 6_5.htm Web页面中的tooltip提示。 6_6.htm 在Web页面中控制其元素的选择状态。 第7章(\7) 示例描述:JavaScript的...

    text-highlight:网页文本选中高亮(可多选,可跨块标签高亮)

    jsTextOperation 网页文本选中高亮,关键字搜索高亮 文本编辑元素中的文本选择(Input, TextArea) document.activeElement() 方法 跨标签文本选择 Selection 对象,window.getSelection() 方法

    Febotion HTML Spy v1.3.0

    通过使用Febotion HTML Spy,你可以针对网页内每一个元素做修改,可以修改Cookie,添加和调用JavaScript/VBScript,缩放网页,改变网页字体颜色,高亮标记关键字,把网页保存成mht文件,甚至可以即时以可视化方式增...

    SyCODE Syntax Highlighter

    实现方式借鉴了著名的db.SyntaxHighlighter采用正则表达式进行关键字匹配,处理速度比db.SyntaxHighlighter高出 5~10倍,是目前处理速度最快的javascript语法高亮程序。 &lt;br&gt;官方没有提供演示,本人添加了一个...

    vim-marko:Marko.js的Vim语法高亮插件

    这主要是HTML语法突出显示,添加了一些关键字, ${和}内的所有表达式都突出显示为JavaScript。 突出显示包括: 带有冒号HTML属性,例如on-click突出显示为Keyword 。 #if , /if , :else和:else if突出显示为...

    notepad++ V6.5.1 绿色版,可直接使用

    支持的语言: c c++ java c# xml html php javascript"&gt;notepad++ 是一款非常有特色的编辑器 是开源软件 可以免费使用 功能有: ① 内置支持多达 27 种语法高亮度显示 囊括各种常见的源代码 脚本 值得一提的是 完美...

    javascript实现页面内关键词高亮显示代码

    代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...关键字高亮显示&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=”re

Global site tag (gtag.js) - Google Analytics