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

高亮关键字(javascript+html)

HTMLJavaScriptXHTML 
阅读更多 
使用时传递要高亮的关键字如: 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
踩
分享到：
| PHP 关键字 final self static const
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery动态高亮关键字(可同时高亮多个)

    为了高亮关键字，我们需要创建一个CSS类，用于改变被选中的关键字的样式。例如： ```css .highlight { background-color: yellow; font-weight: bold; } ``` 3. **编写jQuery函数**： 创建一个函数，接收...

    JQuery 关键字高亮插件

    // 使用插件高亮关键字 elementsToHighlight.highlight(keyword); }); ``` 在这个例子中，`highlight`函数是插件提供的方法，它会搜索元素中的文本，找到并替换匹配的关键字，将其包裹在一个带有特定样式的元素...

    jS 正则表达式实现关键字高亮显示

    总之，利用JavaScript和正则表达式实现关键字高亮显示是一个涉及字符串处理、正则匹配和DOM操作的过程。通过创建合适的正则表达式模式，进行字符串替换，以及应用适当的CSS样式，我们可以有效地突出显示文本中的关键...

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

    `jquery.mark`允许用户指定在哪些HTML元素内进行关键字搜索和高亮。这样，你可以确保只在特定的段落、标题或者链接中进行高亮，而不影响其他不相关的元素。 4. **自定义class名称**： 用户可以设定自定义的CSS ...

    代码高亮显示javascript插件

    代码高亮的基本原理是通过识别代码中的关键字、变量、字符串、注释等元素，然后用不同的样式（如颜色、粗体、斜体）进行区分，使得代码结构更加清晰，阅读者可以更快地理解和定位代码。这个过程通常由JavaScript库来...

    javascript关键字高亮代码

    虽然故事本身并不直接关联到具体的IT技术细节，但从文档的部分内容可以看出，它涉及到了HTML与JavaScript的基本用法，尤其是如何在网页中实现文本关键字的高亮显示。 ### 关键词高亮显示 关键词高亮显示是一种常见...

    javascript关键字实时自动高亮

    标题中的“javascript关键字实时自动高亮”指的是在网页中，通过JavaScript编程技术实现实时检测并高亮显示特定关键字的功能。这种技术常用于突出显示页面上的重要信息，提高用户阅读体验，尤其在文档、博客或者论坛...

    页面关键字高亮实例

    这个实例主要涉及JavaScript（js）技术，通过编程实现HTML页面中关键字的自动高亮显示。以下是对这个实例的详细解释和相关知识点的阐述。 首先，关键词高亮的基本原理是查找HTML文本中出现的关键字，然后对这些...

    Edit自动换行,关键字高亮

    例如，JavaScript中的"function"和"return"是关键字，而在HTML中，"&lt;html&gt;"和"&lt;/body&gt;"等标签则需要高亮。此外，一些编辑器还支持用户自定义高亮设置，以便根据个人喜好和需求调整颜色方案。 至于文件名称列表中的...

    react-reactmarker高亮显示关键字并为您的文字添加颜色

    React-ReactMarker是一款用于在文本中高亮显示关键字并为文字添加颜色的库，特别适合于需要突出显示代码示例、搜索结果或者任何其他需要强调特定词汇的场景。这款库是基于React构建的，因此它能够很好地融入到React...

    vue+Element实现搜索关键字高亮功能

    对每一行数据进行遍历，找到包含搜索关键字的文本内容，然后通过一个自定义的函数（如showData）来处理这些文本，将匹配到的关键字替换为带有高亮样式的HTML代码。在这个例子中，使用了v-html指令来将处理后的字符串...

    高亮显示关键字 -- js插件

    这个"高亮显示关键字 -- js插件"显然是一款用JavaScript编写的插件，旨在帮助用户更清晰地识别和突出显示特定的关键字或短语。JavaScript作为一种广泛使用的客户端脚本语言，适用于在用户的浏览器上运行，实现动态...

    js代码高亮显示 JavaScript代码高亮 jsp

    代码高亮主要是通过解析代码的语法结构，识别关键字、变量、函数等元素，并为这些元素赋予不同的颜色和样式，从而使得代码的结构更加清晰。这通常涉及到两个主要步骤： 1. 语法分析：将原始的代码字符串解析成语法...

    利用html高亮javascript语法

    代码高亮主要是通过给不同的编程元素（如关键字、变量、字符串等）赋予不同的颜色和样式，以增强代码的视觉效果。在HTML中，我们可以使用`&lt;pre&gt;`和`&lt;code&gt;`标签来保留代码的原始格式，并在此基础上应用样式。 接...

    javascript网页关键字高亮代码

    ### JavaScript网页关键字高亮代码详解 #### 一、概述 在网页开发中，为了提高用户体验，经常需要对页面中的特定关键词进行高亮显示。本文将详细介绍一个基于JavaScript的关键字高亮代码实现方法，并对该方法的...

    原生JavaScript字体高亮.html

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

    jquery高亮插件（支持textarea内容高亮）

    **jQuery高亮插件——实现文本高亮与关键词查找** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在网页开发中，有时我们需要对页面上的特定文本或者关键词进行...

    Google语法高亮JavaScript功能

    语法高亮（Syntax Highlighting）是一种在显示源代码或命令行输出时，通过使用不同的颜色、字体样式来突出显示不同类型的编程元素（如关键字、变量、字符串、注释等）的技术。这不仅有助于提高代码的可读性，还可以...

    javascript网页关键字高亮代码.docx

    JavaScript网页关键字高亮是一种常见的网页交互效果，常用于搜索引擎结果展示、阅读器或者代码编辑器中，以便用户能快速定位到他们关心的关键信息。以下是一个简单的JavaScript实现关键字高亮的代码示例，以及相关的...

Magicbox
Global site tag (gtag.js) - Google Analytics