高亮关键字(javascript+html)

最新推荐文章于 2021-06-07 13:50:00 发布
最新推荐文章于 2021-06-07 13:50:00 发布
阅读量191 收藏 1
点赞数
分类专栏： jquery 相关 文章标签： HTML JavaScript XHTML ViewUI 
使用时传递要高亮的关键字如: 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[ 
    οnlοad=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>

 

aw3423zsddf
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML高亮关键字的完美解决方案
12-14
最近做项目遇到这样的一个功能：在网页中高亮关键字。 本以为一个 innerHTML replace 就能实现的简单操作，却遇到了许多的问题。本文就记录这些问题和最终的完美解决办法， 希望能对有同样遭遇的小伙伴有所帮助。只对结果感兴趣的，忽略过程，直接跳过看结果吧~ 常用做法：正则替换 思路：要想高亮元素，那么需要将关键字提取出来用标签包裹，然后对标签进行样式调整。使用 innerHTML，或 outHTML, 而不能使用 innerText,outText。 const regex = new RegExp(keyword,"g") element[removed] = element.i
html页面 关键字高亮,js高亮html关键字
weixin_39527292的博客
06-03 175
function highLightText(keywords) {let str = '再次曝光!iPhone12简直毫无短板,摄像头和电池提升巨大!'let hightlightText = keywordslet newStr = str.split('')let newLight = hightlightText.split('')newStr.forEach((e, i) => {...
html页面高亮关键词
矗立在西北的白杨树
07-25 574
javascript 对html内容的关键字高亮显示
热门推荐
FreeWave's space
06-17 1万+
通过javascript对html里面内容进行高亮显示， 可以同时高亮多个关键字， 每个关键字以不同的颜色展示代码如下：/** * 高亮显示关键字, 构造函数 * @param {} colors 颜色数组，其中每个元素是一个 背景色,前景色 组合 */var Highlighter = function(colors) { this.colors = colors
html 高亮关键字,html实现高亮关键字
weixin_39920338的博客
06-07 118
正则优化一：仅处理位于标签内的元素var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 转义处理keyword包含的特殊字符，如 /.var finder = new RegExp(">.*?"++".*?element.innerHTML = element.innerHTML.replace(f...
利用html高亮javascript语法
08-11
代码高亮主要是通过给不同的编程元素（如关键字、变量、字符串等）赋予不同的颜色和样式，以增强代码的视觉效果。在HTML中，我们可以使用`<pre>`和`<code>`标签来保留代码的原始格式，并在此基础上应用样式。 接...
jQuery过滤HTML标签并高亮显示关键字的方法
12-01
本文将详细讲解如何使用 jQuery 过滤 HTML 标签并高亮显示关键字。 首先，我们要了解 jQuery 的核心概念。jQuery 是一个轻量级的库，它通过选择器（Selector）来选取 HTML 元素，并提供了丰富的函数来操作这些元素...
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
10-27
JavaScript中的关键词高亮是一种常见的...通过理解这个案例，开发者可以掌握JavaScript中实现关键词高亮的基本技巧，并根据需求进行相应的扩展和优化，比如支持更多高亮样式、忽略特定标签内的关键词、处理HTML实体等。
javascript 关键字高亮显示实现代码
01-19
关键字高亮显示 软件开发网是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的...
页面关键字高亮实例
10-09
关键字高亮具体案例 有js文件 html文件 很实用
[转]JS,HTML高亮显示
bluehire的专栏
12-23 472
http://tool.92798.net/more/codelight_js.html 管理员在2009年8月13日编辑了该文章文章。 --> -->
通过javascript对html里面关键词高亮显示
我也IT
07-02 214
通过javascript对html里面内容进行高亮显示， 可以同时高亮多个关键字， 每个关键字以不同的颜色展示 代码如下： /** * 高亮显示关键字, 构造函数 * @param {} colors 颜色数组，其中每个元素是一个 '背景色,前景色' 组合 */ var Highlighter = function(colors) { this.colors = color...
高亮显示关键字
静下心来，认真的研究技术。
01-09 320
 高亮显示关键字实现方法及步骤：点击搜索按钮，跳转到serch.php 并查处含有关键字的商品代码：$query  = mysql_query($sql);     $num2= mysql_num_rows($query);               while($rs=mysql_fetch_array($query)){                 $sor
HTML5简述如何解决方案HTML高亮关键字
The_qianduan的博客
03-20 5696
有不少从事HTML5开发的小伙伴在工作中会遇到这样或者那样的问题，本篇文章给读者们分享一下HTML高亮关键字的完美解决方案，有遇到过这样问题或者是对该问题感兴趣的小伙伴就随小编一起来了解一下吧。 常用做法：正则替换 思路：要想高亮元素，那么需要将关键字提取出来用标签包裹，然后对标签进行样式调整。使用innerHTML，或outHTML, 而不能使用innerText,outText。 const ...
用Javascript实现关键词的高亮显示
weixin_30345055的博客
03-13 114
　　最近在搞一个网站，需要在内容区域高亮显示一些关键词。本来想在后台页面用c#实现，后来感觉这样做不太可取。因为我想高亮的高键词有n个之多，在服务端循环处理的话，势必会影响效率、占用服务器资源。所以，才考虑使用JS来实现，代码如下： 一个小类（可以放置到一个*.js文件中） functionXP_Highlight() { this.Key...
html页面 关键字高亮,HTML高亮关键字的完美解决方案
weixin_29061465的博客
06-03 3051
最近做项目遇到这样的一个功能：在网页中高亮关键字。本以为一个 innerHTML replace 就能实现的简单操作，却遇到了许多的问题。本文就记录这些问题和最终的完美解决办法， 希望能对有同样遭遇的小伙伴有所帮助。只对结果感兴趣的，忽略过程，直接跳过看结果吧~常用做法：正则替换思路：要想高亮元素，那么需要将关键字提取出来用标签包裹，然后对标签进行样式调整。使用 innerHTML，或 outHT...
JS实现关键词高亮：在HTML字符串中匹配“跨标签关键词”
携手天下
11-25 2407
本文发布于个人网站：https://wintc.top/article/59，转载请注明 很久之前（好像刚好是一年前）写过一个Vue组件，匹配文本内容中的关键词高亮，类似浏览器ctrl+f搜索结果。实现方案是，将文本字符串中的关键字搜索出来，然后使用特殊的标签（比如font标签）包裹关键词替换匹配内容，最后得到一个HTML字符串，渲染该字符串并在font标签上使用CSS样式即可实现高亮的效果。 当时的实现过于简单，没有支持接收HTML字符串作为内容进行关键词匹配。这两天有同学问到，就又思考了这个问题.
浅谈JavaScript实现关键字文本高亮显示
筱葭的博客
04-15 1万+
前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。 HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相
javascript怎么关键字高亮随机不同颜色
最新发布
09-11
### 回答1： 您好，关于您的问题，可以通过使用CSS样式来实现关键字高亮，并且可以使用JavaScript生成随机颜色。具体实现方法可以参考以下代码： ```html <style> .highlight { background-color: #FCD5CE; /* 设置关键字高亮颜色 */ } </style> <script> function highlightKeywords() { var keywords = ["JavaScript", "CSS", "HTML"]; // 关键字列表 var elements = document.getElementsByTagName("*"); // 获取所有元素 for (var i = ; i < elements.length; i++) { var element = elements[i]; if (element.nodeType === 3) { // 判断是否为文本节点 var text = element.nodeValue; var replacedText = text; for (var j = ; j < keywords.length; j++) { var keyword = keywords[j]; var regex = new RegExp(keyword, "gi"); // 创建正则表达式，忽略大小写 if (regex.test(text)) { var span = document.createElement("span"); span.className = "highlight"; span.style.backgroundColor = getRandomColor(); // 设置随机颜色 span.textContent = keyword; replacedText = replacedText.replace(regex, span.outerHTML); } } if (replacedText !== text) { var newNode = document.createElement("span"); newNode.innerHTML = replacedText; element.parentNode.replaceChild(newNode, element); } } } } function getRandomColor() { var letters = "0123456789ABCDEF"; var color = "#"; for (var i = ; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } window.onload = highlightKeywords; // 页面加载完成后执行高亮函数 </script> ``` 以上代码可以实现在页面中将指定的关键字高亮，并且每个关键字的高亮颜色都是随机生成的。希望对您有所帮助。 ### 回答2： 在JavaScript中，我们可以运用CSS样式和DOM操作来实现关键字的高亮显示，并随机分配不同的颜色。 首先，我们需要为要高亮显示的关键字添加一个class或者id。例如，我们可以将关键字用`span`标签包裹，并设置一个class名为"highlight"，如下所示： ```html <p>这是一个<span class="highlight">关键字</span>的例子。</p> ``` 接下来，在JavaScript中，我们可以通过获取所有包含关键字的元素，并为它们随机分配不同的颜色样式。 ```javascript // 获取所有拥有highlight类名的元素 const highlightElements = document.getElementsByClassName('highlight'); // 生成随机颜色的函数 function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } // 为每个关键字元素添加随机颜色样式 for (let element of highlightElements) { const randomColor = getRandomColor(); element.style.backgroundColor = randomColor; element.style.color = 'white'; // 可选，为了确保文本可读性 } ``` 以上代码会为所有拥有highlight类名的元素随机分配不同的背景颜色。`getRandomColor`函数会生成一个随机的十六进制颜色码，然后在循环中为每个关键字元素设置`backgroundColor`样式为生成的颜色，可以添加`color`样式属性，以确保文本的可读性。 使用这种方式，关键字在页面中将以不同的随机颜色高亮显示。 ### 回答3： 要实现JavaScript关键字的随机不同颜色高亮，可以按照以下步骤进行： 1. 首先，创建一个包含所有关键字的数组。可以使用JavaScript中的关键字列表或自定义关键字列表。 2. 使用JavaScript的Math.random()函数生成一个0到1之间的随机数。 3. 将随机数乘以关键字颜色总数并向下取整，得到一个索引值。 4. 使用该索引值从颜色数组中获取对应的颜色。 5. 将获取到的颜色应用到关键字的高亮样式中，例如使用CSS的color属性。 6. 重复步骤2至5，为每个关键字生成不同的随机颜色并应用到对应的高亮样式中。 以下是示例代码实现上述步骤： ```html <!DOCTYPE html> <html> <head> <style> .highlight { color: black; font-weight: bold; } </style> </head> <body> <p id="code"> var x = 5; for (var i = 0; i < 10; i++) { console.log(i); } var y = 10; </p> <script> // 关键字列表 var keywords = [ "var", "for", "console", "log", ]; // 颜色列表 var colors = ["red", "blue", "green", "yellow", "orange"]; var codeElement = document.getElementById("code"); // 遍历关键字列表 for (var i = 0; i < keywords.length; i++) { // 生成随机颜色索引 var randomIndex = Math.floor(Math.random() * colors.length); // 获取随机颜色 var randomColor = colors[randomIndex]; // 创建高亮样式 var highlightStyle = "color: " + randomColor; // 高亮关键字 var keywordRegExp = new RegExp("\\b" + keywords[i] + "\\b", "g"); codeElement.innerHTML = codeElement.innerHTML.replace( keywordRegExp, '<span class="highlight" style="' + highlightStyle + '">$&</span>' ); } </script> </body> </html> ``` 上述代码通过使用正则表达式将关键字找出并包裹在`<span>`标签中，该标签具有带有随机颜色类的高亮样式。每次运行代码，关键字都会被高亮为不同的随机颜色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值