高亮显示关键字的js脚本

合集下载

个人搜索引擎开发的三种高亮显示的方法小结

关于搜索引擎高亮显示问题的个人方法心得：
方法一：很多人说在数据库中直接使用这个，但是具体怎么实现你们可以去问一下那些高手，呵呵，我是没太明白，竟然有人可行，说明这种方法是实用的replaceAll(keywords, "<span style='background:red'>"+keywords+"</span >");这其中q1是字段名称。在数据库中这种方式是可行的。如果要实现搜索引擎的关键字高亮显示，我就不知道这种方式怎么实现了，可以参与共同讨论；
方法三：在lucene建索引的过程中高亮显示，这样的话就显示在内存中了。
例如我的程序：
//String[] highlightCol = {"啊哦"};
//Highlighter highlighter = null;
如果有什么问题，可以联系作者：766003546@qq .com 。希望共同学习和探讨。敬请批评。
QueryScorer scorer=new QueryScorer(query);
SimpleHTMLFormatter simpleHTMLFormatter=new SimpleHTMLFormatter("<font color='red'>", "</font>");
Highlighter highlighter=new Highlighter(simpleHTMLFormatter,scorer);
for(int i=0;i<temp.size();i++){
String text=highlighter.getBestFragment(analyzer,"啊哦",temp.get(i));//进行高亮显示

JS页内查找关键词的高亮显示

<html><META HTTP-EQUIV="Content-Type" content="text/html; charset=gb_2312-80"><TITLE>WinWebMail</TITLE><LINK href="images\hwem.css" rel=stylesheet><script language="JavaScript"></script><BODY><br><div align="center"><table width="90%" border="0" align="center" cellspacing="0"bgcolor="#EFF7FF" style=border:1px #8CA5B5 solid; id="zoom"> <tr bgcolor="#DBEAF5"><td height="50" style=border-bottom:1px #8CA5B5 solid;><div align="center"><font class="s" color="#104A7B"><b>帮  助</b><a href="/">邱敏敏s blogQQ:7019908</a></div><div align="center"><table width="98%"><tr><td align="left"><input type="text" id="searchstr" name="searchstr" class="textbox" size="10"> <input type="button" value="页内查找" onclick="javascript:findIt();"class="sbttn">     </td><td align="right">查看:[<a href="javascript:doZoom(16)">大字</a> <ahref="javascript:doZoom(14)">中字</a> <a href="javascript:doZoom(12)">小字</a>]</font></td></tr></table></div></td></tr><tr><td> <br><font color="#FF3333">登录系统时的增强安全性</font><br><br>用来在共享计算机上增强安全性的登录选项是为那些从图书馆、学校或网吧登录的用户设计的. 该登录选项在您退出帐户时能够使浏览器高速缓存中的页面过期. 这表明一旦您退出, 您所访问的页将不能被共享计算机的其他用户查看.<br>注意: 由于页面没有被高速缓存到您的本地磁盘驱动器中, 因此在使用此选项时您会感觉速度变慢了.<br><br></td></tr><tr><td> <br><a name="writemail"></a><font color="#FF3333">查看其他语言的邮件内容</font><br><br>当收到其他语言的邮件内容时, 页面可能会显示为乱码, 您可以通过调整IE浏览器的编码来正常阅读邮件内容.<br>方法是: 用鼠标右键点击邮件内容页面, 在弹出菜单的"编码"中选择正确的编码.<br><br></td></tr><tr><td> <br><font color="#FF3333">报告垃圾邮件</font><br><br>我们利用您报告为垃圾邮件的邮件来提高服务器过滤垃圾邮件的性能. 我们还可能将报告的垃圾邮件提交给第三方以一同反击垃圾邮件.<br><br></td></tr><tr><td> <br><a name="writemail"></a><font color="#FF3333">撰写HTML格式邮件</font><br><br>如果您的Web 浏览器是面向Windows 的Microsoft Internet Explorer 5.0或更高版本, 您可以通过启用“个人配置”中的“使用HTML格式写邮件”选项来撰写HTML格式的电子邮件, 您将可以更改字体、更改字体大小以及颜色的选项, 此外, 还有加粗字体、添加下划线以及按照自己的风格来编排邮件的选项.<br> <br></td></tr><tr><td> <br><font color="#FF3333">快速地址列表</font><br><br>快速地址列表可以帮助您以最快捷的方式输入您所需要的邮件地址.<br> <br></td></tr><tr><td> <br><font color="#FF3333">通讯组</font><br><br>您可以将经常需要批量发送的邮件地址编辑成为通讯组, 在写邮件时您将可以直接输入通讯组名称, 从而实现将邮件一次发送给指定通讯组内所有成员的功能.<br><br></td></tr><tr><td> <br><font color="#FF3333">附件上传</font><br><br>1. 添加附件: 先按“浏览”, 选取您要添加的附件, 然后按下“上传附件”按钮即可, 此时会上传附件, 附件越大将使用越久的资料传送时间, 请您耐心等候.<br>注意: 单附件上传的最大长度不超过4M.<br><br>2. 删除附件: 先选取附件, 再按“删除”即可.<br><br></td></tr><tr><td> <br><font color="#FF3333">存储文件夹</font><br><br>1. 您可以上传或是从邮件附件中摘取文件并保存于您邮箱的网络存储空间中, 您将可以在发送邮件时直接将网络存储中的附件加入到待发邮件中.<br> <br>2. 因为存储文件夹使用的是您的邮箱空间, 所以您需要注意合理分配存储文件夹的数据量.<br><br>3. 在您删除存储文件夹下的子文件夹时, 需要先将子文件夹中的文件转移或删除, 否则子文件夹无法被删除.<br><br>4. 您可以通过设置密码或是不设置密码的方式共享您的存储文件夹数据.<br><br></td></tr><tr><td> <br><font color="#FF3333">发送系统邮件功能(只有管理员才有此功能)</font><br><br>管理员在选中此项功能后发出的邮件, 系统内用户在通过WebMail浏览此邮件时会看到醒目的标识.<br><br></td></tr><tr><td> <br><font color="#FF3333">私人邮件夹管理</font><br><br>1. 新建私人邮件夹时, 邮件夹名称可以是数字、字符和汉字, 并支持长邮件夹名, 但不能使用一些系统保留的名称(如: in, out等).<br><br>2. 在您删除私人邮件夹时, 需要先将此私人邮件夹中包含的所有邮件转移或删除, 否则邮件夹无法被删除.<br><br>3. 您可以通过设置密码或是不设置密码的方式共享自己的私人邮件夹, 从而让系统中的其他用户可以共享您的资源.<br><br></td></tr><tr><td> <br><font color="#FF3333">读取确认</font><br><br>选中此功能后, 在对本系统内用户写信后, 当此收件人通过WebMail看到信或是通过POP3下载了您写给他的这封邮件时, 系统将会发一封回执给您.但需注意的是: 此项功能只当收件人是系统内用户时才有效.<br><br></td></tr><tr><td><a name="delivermail"></a><br><font color="#FF3333">转递邮件</font><br><br>转递邮件是将邮件原封不动的转交至指定地址的邮件传送方式.<br><br></td></tr><tr><td> <br><font color="#FF3333">邮件查找</font><br><br>本系统能按照时间或其它条件来协助您查找所有邮箱中的邮件.<br><br>1. 在主题(发信地址、发信人)查找中可以按照通配符的方式来进行邮件查找, *: 代表任意长字符串, ?: 代表一个字符(一个中文字符需用两个??来代替).<br><br>2. 日期查找时请注意缺省查找将只查找今天以前收到的邮件.<br><br></td></tr><tr><td><a name="sharefolder"></a><br><font color="#FF3333">文件夹共享设置(将自己的私人信箱共享给其他用户)</font><br><br>您可以使用此项功能将自己创建的私人信箱共享给其他用户(允许其他用户读取此文件夹中的内容).<br>共享方式共分为三种:<br><b>1、不共享:</b> 此私人信箱不共享给其他任何用户.<br><b>2、加密码后共享:</b> 此私人信箱允许共享, 但需要其他用户输入正确的密码后才可以查看此私人信箱中的内容.<br><b>3、无密码共享:</b> 此私人信箱允许共享, 并且无需密码其他任何用户即可查看此私人信箱中的内容.<br><br><b>是否允许系统显示:</b> 选中该选项后, 此私人信箱将会被加入到"系统共享文件夹"列表中(您可以通过点击左边的"共享文件夹"来显示"系统共享文件夹"列表), 所有的用户都可以在此列表中看到您共享了一个私人信箱.<br><br><b>密码设定:</b> 当您只想修改私人信箱的共享方式、显示方式或直接共享给指定用户, 而不想修改原先已设定的密码时, 您只要不输入密码即可.<br><br><b>直接共享给指定用户:</b> 您可以将私人信箱直接共享给系统内的其他用户. (注: 建议您将共享方式设置为加密码后共享, 如果您设置为无密码共享时, 除了您指定的用户外, 其他用户也可以查看您共享的私人信箱)<br><br></td></tr><tr><td><a name="ff_showall"></a><br><font color="#FF3333">收藏其他用户共享出来的文件夹</font><br><br>您可以使用此功能将其他用户共享出来的文件夹加入您收藏的共享文件夹列表(显示在上方的"我收藏的共享文件夹")中.<br><br>加入方法分为两种:<br><b>1、从显示在"系统共享文件夹"(显示在下方)中的列表里直接收藏:</b> 您可以直接点击任一显示在系统共享文件夹列表中的文件夹最后的图标来进行收藏.<br>注意: 如果此共享文件夹是加密码后共享时, 您必须要输入正确的共享密码时才可以正常查看其他用户共享出来的文件夹(具体的密码您可以询问此文件夹的所属用户).<br><br><b>2、直接收藏:</b> 当系统内的某一个用户共享了他自己的私人信箱后, 如设置为不允许系统显示时, 您将无法在"系统共享文件夹"中看到, 这时您必须使用直接收藏的方式才可以将他共享出来的私人信箱加入到您的共享文件夹列表中. 不过, 您将需要直接输入文件夹所属人的用户名、文件夹名以及密码.<br> 注意: 以上两种加入方式, 当共享文件夹是无密码共享时, 您将无需输入任何密码.<br><br><b>修改:</b> 当共享文件夹已经被原共享人修改了共享密码时, 您可以使用修改功能更新此文件夹的密码, 修改成功后才可以继续查看此共享文件夹.<br></td></tr><tr><td><a name="showuserpop"></a><br><font color="#FF3333">多POP3接收代理</font><br><br>如果你以前已经有了其它Email地址, 并且你的朋友都在向那些地址发信; 你就可以设置"POP3接收"功能, 让系统把你在其它地方的Email通过POP3协议提取到本系统中.请在"服务器地址"中填写你的POP3服务器名称或地址, 如"", 然后填写你收取该服务器上邮件的帐号名称和口令, 如果你不知道你的服务器使用什么端口,请使用缺省设置"110".<br><br></td></tr><tr><td><a name="showuserkill"></a><br><font color="#FF3333">用户拒收邮件地址</font><br><br>对于您不想接收的邮件地址, 您可以将其加入到拒收列表中.<br><br></td></tr><tr><td><a name="userfiltermail"></a><br><font color="#FF3333">高级邮件过滤功能</font><br><br>高级邮件过滤功能, 可以让系统帮助您自动将符合指定条件(“邮件地址”、“发件人”、“邮件大小”或“主题”)的邮件进行删除、自动回复或是移到垃圾箱的操作.<br><br>我们可以使用此功能对付日益增多的垃圾邮件和其他不受欢迎的邮件. 每一个过滤器的排列顺序是很重要的, 当用户接收到一封符合某一过滤器的邮件后, 如果此过滤器的"符合条件后的处理"是中止的话, 那么此邮件将不会使用余下的过滤器进行过滤.<br><br></td></tr><tr><td><a name="showusersetup"></a><br><font color="#FF3333">启动相关功能</font><br><br>系统中的POP3接收功能、邮件拒收功能、自动回复功能、自动转发功能将需要在启动该功能后, 才会被正式启用.<br><br></td></tr><tr><td><a name="style"></a><br><font color="#FF3333">帐号保护</font><br><br>为防止您忘记密码后无法进入系统, 您需要填写帐号保护信息. 当您因为忘记密码而通过回答帐号保护问题进入邮箱后, 请立即修改您的密码.<br><br></td></tr><tr><td><a name="calshare"></a><br><font color="#FF3333">“私人”、“公开”和“显示正忙”的区别</font><br><br>效率手册事件中的“私人”、“公开”和“显示正忙”许可, 决定他人查看您的公开效率手册时的事件显示方式. 如果要让他人看到事件的标题、说明和时间等信息, 则可将事件设置为“公开”. 如果要让其他人知道您在此事件期间正忙, 但他们又没有必要知道您在干什么, 则可以将事件设置为“显示正忙”. 如果不想让其他人看到您此期间计划的事件, 则将事件设置为“私人”.<br><br></td></tr><tr><td> <br><font color="#FF3333">退出电子邮箱</font><br><br>请不要以直接关闭浏览器的方法退出邮箱, 建议使用点击"退出"的方式, 然后再关闭所有浏览器, 这样将可确保您的信箱安全.<br><br></td></tr></table></div><br><br></BODY></html>。

mark.js使用方法

mark.js使用方法Mark.js是一个用于在网页中高亮关键词的JavaScript库。

它可以帮助我们在文本中找到并标记出特定的关键词，提高用户的搜索体验。

下面是关于Mark.js的使用方法的详细说明：1. 引入Mark.js库：在HTML文件中，我们需要先引入Mark.js库。

可以通过在`<head>`标签中添加以下代码来实现：html.<script src="path/to/mark.min.js"></script>。

确保将`path/to/mark.min.js`替换为实际的Mark.js文件路径。

2. 创建一个Mark实例：在JavaScript文件中，我们需要创建一个Mark实例来使用Mark.js库的功能。

可以通过以下代码来创建一个Mark实例：javascript.var markInstance = newMark(document.querySelector("#targetElement"));这里的`#targetElement`是要进行关键词标记的目标元素的选择器。

可以是一个具有特定id的元素，或者其他合适的选择器。

3. 执行关键词标记：一旦创建了Mark实例，我们可以使用其提供的方法来执行关键词标记。

以下是一些常用的方法：`markInstance.mark(keyword)`: 标记单个关键词。

将`keyword`替换为要标记的关键词。

`markInstance.mark(keywords)`: 标记多个关键词。

将`keywords`替换为一个包含多个关键词的数组。

`markInstance.markRegExp(regexp)`: 使用正则表达式标记关键词。

将`regexp`替换为要使用的正则表达式。

这些方法会自动在目标元素中找到匹配的关键词，并将其进行标记。

4. 设置标记选项：Mark.js还提供了一些选项来自定义标记的样式和行为。

js高亮显示查找关键字

js高亮显示查找关键字js 高亮显示查找关键字---最简单的方法<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><SCRIPT LANGUAGE="JavaScript"></SCRIPT></HEAD><BODY><INPUT TYPE="text" NAME="" onblur=" HighLight(this)" onchange="huifu()"><br/>aaaaaaaaasdasdasdf<br/>fdddddd<br/>dddddddfffffggggggui....;;;;;;;;;;kkk kkkkkk<br/>ggggggggggggggggg<br/>mmmmmmmtyutyuer<br/>iuyoiuouiopiooooooooolkasq</BODY></HTML>。

Jquery高亮显示文本中重要的关键字

Jquery⾼亮显⽰⽂本中重要的关键字⼀、界⾯预览⿏标放到右边的Tab按钮上，⽂字透明度降低，同时⼀段⽂字⾼亮显⽰，效果如下：很绚丽的效果⼳！⼆、实现原理将要⾼亮显⽰的⽂字加上<span>段落标记， class=”mask”的div 做为遮罩层，使此遮罩层位于⽂字内容之上（z-index属性，使⽤Jquery给段落动态添加样式类。

三、HTML代码<div class="wrapper"><ul class="entity-results"><li><a class="d1"href="#">Summary</a></li><li><a class="d2"href="#">Avatar</a></li><li><a class="d2"href="#">Avatar</a></li><li><a class="d3"href="#">Formats</a></li></ul><div class="content"><h2>Avatar (2009 film)</h2><div class="entity-source"><img src="images/avatar.jpg"alt="Avatar poster"/><p>Avatar, also known as James Cameron's Avatar, is an American 3-D science fictionepic film written and directed by <a href="/wiki/James_Cameron">James Cameron</a>, and was released on December 16, 2009 by 20th Century Fox.The film is co-produced by <ahref="/wiki/Lightstorm_Entertainment">Lightstorm Entertainment</a>, and <span class="d1">focuses on an epic conflict on Pandora</span>,an inhabited Earth-sized moon of Polyphemus, one of three fictional gas giants orbiting<a href="/wiki/Alpha_Centauri_A">Alpha Centauri A</a>. OnPandora, human colonists and the sentient humanoid indigenous inhabitants of Pandora, the Na'vi, engage in a war over the planet's resources and the latter's continuedexistence. The film's title refers to <span class="d2">an avatar, a representation ofa real person in a virtual world</span>.</p><p><span class="d3">The film was released in 2D and 3D formats</span>, along with anIMAX 3D release in selected theaters. The film is being touted as a breakthroughin terms of filmmaking technology, for its development of 3D viewing and stereoscopicfilmmaking with cameras that were specially designed for the film's production.</p><p>Read the rest of the <a href="/wiki/Avatar_(2009_film)">originalWikipedia page about Avatar</a></p><div class="mask"></div></div></div></div>entity-results类中显⽰了Tab按钮，每个按钮控制左边⽂字的透明度，段落⽂字的⾼亮显⽰。

JS实现静态页面搜索并高亮显示功能完整示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS搜索</title> </head> <body> <input id="key-word" class="key-word" value="请输入搜索内容" /> <button id="search-button">搜索</button> <div id="content" > <p>这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊啊啊</p> <p>这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊啊啊</p> <p>这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊啊啊</p> <p>这是主体内容，有很多内容，很多很多啊啊啊……，比如1234abcd啊啊< d d>啊啊</p> </div> <script> function $(id){ return document.getElementById(id) } var putWordsObj = $('key-word'); putWordsObj.onfocus = function(){ if(this.value == '请输入搜索内容')this.value=''; } putWordsObj.onblur = function(){ if(!this.value)this.value='请输入搜索内容'; } //search $('search-button').onclick = function(){ var content = $('content').innerHTML; var keyWord = $('key-word').value; content = search_do(content, keyWord); $('content').innerHTML = content; //alert(content) } function search_do(content,keyWord){ var keyWordArr = keyWord.replace(/[\s]+/g,' ').split(' '); var re; for(var n = 0; n < keyWordArr.length; n ++) { //re = new RegExp(">[\s\S]*?"+keyWordArr[n]+"[\s\S]*?<\S","gmi"); re = new RegExp(""+keyWordArr[n]+"","gmi"); content = content.replace(re,'<span style="color:#0f0;background-color:#ff0">'+keyWordArr[n]+'</span>'); } return content; } </script> </body> </html>

mark.js使用方法

mark.js使用方法mark.js是一个JavaScript库，用于在网页中高亮显示关键词或者搜索词。

它提供了一种简单且灵活的方式来标记和突出显示文本中的关键词。

下面是mark.js的使用方法：1. 引入mark.js库，在网页的<head>标签中，添加以下代码引入mark.js库。

html.<script src="mark.min.js"></script>。

2. 创建一个用于标记的容器元素，在网页中，创建一个用于标记的容器元素，比如一个<div>元素，设置一个唯一的id属性，用于标识该容器。

html.<div id="mark-container"></div>。

3. 初始化mark.js对象，在JavaScript中，创建一个mark.js对象，并传入容器元素的id。

javascript.var markInstance = newMark(document.getElementById("mark-container"));4. 执行标记操作，调用mark.js对象的mark方法来执行标记操作。

该方法接受一个关键词或者关键词数组作为参数。

javascript.markInstance.mark("关键词");或者。

javascript.markInstance.mark(["关键词1", "关键词2", "关键词3"]);5. 可选配置项，你还可以使用mark.js提供的一些可选配置项来自定义标记的外观和行为。

比如，你可以设置标记的背景色、前景色、忽略大小写等。

javascript.markInstance.mark("关键词", {。

"separateWordSearch": false,。

js使用highlight.js高亮你的代码

js使⽤highlight.js⾼亮你的代码在逛别⼈的博客的时候，看见别⼈的代码的例⼦使⽤了⾼亮的语法，⽆论是java，js还是php等等语⾔，都会⾃动的对关键字进⾏⾼亮。

于是在前⼏天⾃⼰写了⼀个博客，遇到code时，⾃然就想到了别⼈⽹站如何漂亮，巴拉巴拉。

开始了正式的捣⿎。

在捣⿎之前去别的⽹站看了看。

这⾥贴上简书的效果：其中的关键字，⽅法名，字符串都有不同的颜⾊，虽然这个代码⾼亮得不是很好看，但还过得去。

于是去看了看document，发现是这样的：<pre class="hljs javascript"><code class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPersonInfo</span>(<span class="hljs-params">name,age,sex</span>) </span>{ <span class="hljs-built_in">console</span>.log(name+age+sex);}<span class="hljs-comment">//要是我这样传,name就成了18，age成了王⼆了。

</span>getPersonInfo(<span class="hljs-string">'18'</span>,<span class="hljs-string">'王⼆'</span>,<span class="hljs-string">'男'</span>);<span class="hljs-comment">//所以可以这样写</span><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPersonInfo</span>(<span class="hljs-params">args</span>)</span>{<span class="hljs-built_in">console</span>.log(+args.age+args.sex);}getPersonInfo({name:<span class="hljs-string">'王⼆'</span>,age<span class="hljs-string">'18'</span>,sex:<span class="hljs-string">'男'</span>});</code></pre>hljs？？绝对就是这货了。

react-highlight-words

react-highlight-words## React-Highlight-Words 文档### 简介React-Highlight-Words 是一个用于在 React 应用中实现关键词高亮显示的强大组件。

它提供了一种简单而灵活的方式，让开发人员能够轻松地将搜索关键词在文本中标记出来，从而提升用户体验。

无论是构建搜索功能、文本匹配或其他需要突出显示特定词汇的场景，React-Highlight-Words都是一个理想的选择。

### 安装要使用 React-Highlight-Words，首先需要安装它。

可以通过npm 或 yarn 完成安装：```bashnpm install react-highlight-words```或```bashyarn add react-highlight-words```### 使用一旦安装完成，就可以在你的 React 组件中引入并开始使用了。

以下是一个简单的例子：```jsximport React from 'react';import Highlighter from 'react-highlight-words';const MyComponent = () => {const searchWords = ['React', 'highlight'];return (<div><p><HighlightersearchWords={searchWords}autoEscape={true}textToHighlight="React-Highlight-Words is apowerful component for highlighting words in React applications."/></p></div>);};export default MyComponent;```在上面的例子中，我们引入了 Highlighter 组件并传递了两个属性：`searchWords` 和 `textToHighlight`。

highlight在vue3中的用法

highlight在vue3中的用法在Vue 3中，highlight是一个指令，用于将某个元素的文本内容中的关键词进行高亮显示。

可以通过v-highlight指令来使用它。

具体用法如下：1.首先，在组件中引入highlight指令：```javascriptimport { createApp } from 'vue';import App from './App.vue';import { highlight } from 'vue-next-highlight';const app = createApp(App);app.directive('highlight', highlight);app.mount('#app');```2.在需要应用highlight指令的元素上，使用v-highlight指令，并传入一个包含关键词的数组作为参数：```html<template><div><p v-highlight="['关键词1', '关键词2']">这是一段包含关键词的文本</p></div></template>```在上述示例中，文本内容中的"关键词1"和"关键词2"会被高亮显示。

可以对highlight指令进行拓展，实现更多的功能，比如添加自定义的高亮样式、支持正则表达式匹配等。

可以根据具体需求在highlight指令的实现中进行相应的改动。

```javascript//拓展highlight指令import { highlight } from 'vue-next-highlight';export default {//自定义高亮样式const customHighlight = {bind(el, binding) {//获取关键词const keywords = binding.value || [];//对文本内容进行处理const text = el.innerHTML;const regex = new RegExp(keywords.join('|'), 'gi'); const highlightedText = text.replace(regex, match => { return `<span class="highlight">${match}</span>`;});//更新元素的innerHTMLel.innerHTML = highlightedText;}}//使用拓展的highlight指令const app = createApp(App);app.directive('highlight', customHighlight);app.mount('#app');}```在上述示例中，我们通过添加了一个自定义样式"highlight"，来为关键词添加高亮效果。

js实现关键字高亮

js实现关键字⾼亮<!DOCTYPE html><html><head><meta charset="utf-8" /><title>js关键字⾼亮显⽰</title></head><body><input type="text" id="text" placeholder="请输⼊关键字"/><input type="button" id="button" value="确定"/><br /><br /><div id="content">你好呀！</div><script>var content = document.getElementById("content");var contents = content.innerHTML;var text = document.getElementById("text");var button = document.getElementById("button");button.onclick = function() {var value = text.value; //以关键字将内容划分为数组，数组中不包含关键字var values = contents.split(value); //使⽤js中array的join⽅法，将带有样式的关键字作为拼接数组中所有元素content.innerHTML = values.join('<span style="background:green;">' + value + '</span>');};</script></body></html>。

js—查找指定字符串并高亮显示

js—查找指定字符串并⾼亮显⽰学习数组的indexOf()⽅法的时候，因为它也适⽤于字符串，所以想到了的这个功能，就⾃⼰试了试。

1 <html>2 <head>3 <title></title>4 <style>5 .showBox {6 width: 400px;7 min-height: 100px;8 padding: 10px;9 border: 1px solid #000;10 }1112 .text {13 background: orange;14 }15 </style>16 </head>17 <div class="showBox">唧唧复唧唧，⽊兰当户织。

不闻机杼声，唯闻⼥叹息。

18问⼥何所思，问⼥何所忆。

⼥亦⽆所思，⼥亦⽆所忆。

昨夜见军帖，可汗⼤点兵，军书⼗⼆卷，卷卷有爷名。

阿爷⽆⼤⼉，⽊兰⽆长兄，愿为市鞍马，从此替爷征。

19东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。

旦辞爷娘去，暮宿黄河边，不闻爷娘唤⼥声，但闻黄河流⽔鸣溅溅。

旦辞黄河去，暮⾄⿊⼭头，不闻爷娘唤⼥声，但闻燕⼭胡骑鸣啾啾。

20 </div>21 <p>22 <input placeholder="请输⼊关键字" class="inputEl"/>23 <button onclick="sendMsg()">查找</button>24 </p>25 <script>26var originalText = document.getElementsByClassName('showBox')[0].innerText;27function sendMsg() {28var text = originalText;29var history = document.getElementsByClassName('text');30if (history.length > 0) {31 text = originalText;32 }33var inputValue = document.getElementsByClassName('inputEl')[0].value;34var found = findAll(text, inputValue);35for (var i = 0; i < text.length; i++) {36for (var j in found) {37if (i == found[j]) {38 text = originalText.split(inputValue).join(`<span class="text">${inputValue}</span>`);3940 }41 }42 }43 document.getElementsByClassName('showBox')[0].innerHTML = text;44 document.getElementsByClassName('inputEl')[0].value = "";45 }46function findAll(str, x) {47var results = [];48var len = str.length;49var pos = 0;50while (pos < len) {51 pos = str.indexOf(x, pos);52if (pos === -1)53break;54 results.push(pos);55 pos = pos + 1;56 }57return results;58 }59 </script>60 </html> 主要的思路就是：1. 通过遍历⽬标字符串，使⽤indexOf()⽅法返回找需要查找的字符串的下标，把这些下标依次push到⼀个单独的数组中，作为函数的返回值返回；2. 点击“查找”按钮，再次遍历⽬标字符串，把刚刚返回的数组⾥的下标处的字符串⽤带类名的span标签代替，标签⾥⾯的内容就是需要查找的字符串：1. 使⽤字符串的split()⽅法，先把⽬标字符串以需要查找的字符串作为分隔转换成数组；2. 再⽤数组的join()⽅法，以 <span class='text'>需要查找的字符串</span> 作为分隔，把上⾯的数组连接成字符串;3. 给带有这个类名的span设置背景颜⾊达到⾼亮效果；有⼀点需要注意，当第⼀次查询操作结束后，我们要把上⼀次查询做的操作给清除掉，我的⽅法是：4. 在点击按钮的最开始，就先获取⼀下页⾯中是否有带“text”类名的元素，如果有的话，就把⽬标⽂本的内容赋值为最开始的值，再进⾏下⼀步操作；如果没有的话，直接进⾏后⾯的操作。

Js实现页面关键字高亮显示

Js实现页⾯关键字⾼亮显⽰<!DOCTYPE HTML><html lang="en"><meta http-equiv="Content-Type" content="text/html; charset=gdk"/><head><title>检索关键字</title><script src="/jquery/1.11.1/jquery.min.js"></script></head><body><div style="width:100%; height:100px"><input id="key" type="text"/><input type="button" value="检索" onclick="search()"/></div><div id="result">说散就散 - 刘旭阳<br/>词：张楚翘<br/>曲：伍乐城<br/>抱⼀抱就当作从没有在⼀起好不好要解释都已经来不及<br/>算了吧我付出过什么没关系我忽略⾃⼰就因为遇见你<br/>没办法好可怕那个我不像话⼀直奋不顾⾝是我太傻<br/>说不上爱别说谎就⼀点喜欢说不上恨别纠缠别装作感叹<br/>就当作我太⿇烦不停让⾃⼰受伤我告诉我⾃⼰感情就是这样<br/>怎么⼀不⼩⼼太疯狂抱⼀抱再好好觉悟不能长久<br/>好不好有亏⽋我们都别追究算了吧我付出再多都不⾜够<br/>我终于得救我不想再献丑没办法不好吗⼤家都不留下<br/>⼀直勉强相处总会累垮说不上爱别说谎就⼀点喜欢<br/>说不上恨别纠缠别装作感叹就当作我太⿇烦不停让⾃⼰受伤<br/>我告诉我⾃⼰感情就是这样怎么⼀不⼩⼼太疯狂<br/>别后悔就算错过在以后你少不免想起我<br/>还算不错当我不在你会不会难过<br/>你够不够我这样洒脱说不上爱别说谎就⼀点喜欢<br/>说不上恨别纠缠别装作感叹将⼀切都体谅将⼀切都原谅<br/>我尝试找答案⽽答案很简单简单得很遗憾<br/>因为成长我们逼不得已要习惯因为成长我们忽尔间说散就散<br/></div><script>function keyLight(id, key, bgColor){var oDiv = document.getElementById(id),sText = oDiv.innerHTML,bgColor = bgColor || "orange",sKey = "<span name='addSpan' style='background-color: "+bgColor+";'>"+key+"</span>",num = -1,rStr = new RegExp(key, "g"),rHtml = new RegExp("\<.*?\>","ig"), //匹配html元素aHtml = sText.match(rHtml); //存放html元素的数组sText = sText.replace(rHtml, '{~}'); //替换html标签sText = sText.replace(rStr,sKey); //替换keysText = sText.replace(/{~}/g,function(){ //恢复html标签num++;return aHtml[num];});oDiv.innerHTML = sText;}function search(){if(typeof($("span[name='addSpan']").get(0)) != 'undefined'){var html = $("span[name='addSpan']").get(0).textContent;$("span[name='addSpan']").before(html);$("span[name='addSpan']").remove();}//location.reload();var key = document.getElementById("key").value;if($.trim(key) != null && $.trim(key) != ''){keyLight('result', key);}}</script></body></html>。

JS实现关键词高亮显示正则匹配

JS实现关键词⾼亮显⽰正则匹配html 和ajax 部分就不写了，只需将需要匹配的⽂字传进去就可以了⽐如匹配后台传回的字符串data.content中的关键词：直接调⽤：data.content = highLightKeywords(data.content,keywords)即可以下两个函数分辨是匹配1：匹配关键词words中每⼀个字符，2：匹配整个关键词words//⾼亮关键字 text =>内容 words:关键词 tag 被包裹的标签//匹配每⼀个关键字字符function highLightKeywords(text, words, tag) {tag = tag || 'span';// 默认的标签，如果没有指定，使⽤spanvar i, len = words.length, re;for (i = 0; i < len; i++) {// 正则匹配所有的⽂本re = new RegExp(words[i], 'g');if (re.test(text)) {text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');}}}return text;}//匹配整个关键词不拆分function highlight(text, words, tag) {// 默认的标签，如果没有指定，使⽤spantag = tag || 'span';var i, len = words.length,re;//匹配每⼀个特殊字符，进⾏转义var specialStr = ["*", ".", "?", "+", "$", "^", "[", "]", "{", "}", "|", "\\", "(", ")", "/", "%"];$.each(specialStr, function(i, item) {if(words.indexOf(item) != -1) {words = words.replace(new RegExp("\\" + item, 'g'), "\\" + item);}});//匹配整个关键词re = new RegExp(words, 'g');if(re.test(text)) {text = text.replace(re, '<' + tag + ' class="highlight">$&</' + tag + '>');}return text;}总结以上所述是⼩编给⼤家介绍的JS实现关键词⾼亮显⽰正则匹配，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

JavaScript实现的搜索及高亮显示功能示例

JavaScript实现的搜索及⾼亮显⽰功能⽰例本⽂实例讲述了JavaScript实现的搜索及⾼亮显⽰功能。

分享给⼤家供⼤家参考，具体如下：情景: ⽤来筛选列表中的数据, 由于单条数据很简短, 没有⽤php+mysql去实现筛选功能, 只⽤javascript进⾏筛选, 匹配的⾼亮,或者将不匹配的隐藏掉效果图:html:<div class="contracts-header">名称: <input type="text" value="" id="search_contract_name"></div><div class="contracts-header">代码: <input type="text" value="" id="search_contract_code" placeholder="不区分⼤⼩写"></div><div class="contracts-header"><button onclick="search()">查找</button></div><div id="contracts-list"><ul><li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li><li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li></ul></div>javascript:function search(){var search_contract_name = $("#search_contract_name").val();var search_contract_code = $("#search_contract_code").val();if (search_contract_name && search_contract_code) { //两个输⼊框都有值search_contract_code = search_contract_code.toLowerCase(); //不区分⼤⼩写, 全部转换为⼩写, 下同$("input[name='contract[]']").each(function () {var code_name = this.value;var search_code = code_name.toLowerCase().indexOf(search_contract_code);var search_name = code_name.toLowerCase().indexOf(search_contract_name);if (search_code >=0 && search_name >=0 ) {// this.nextSibling.style.backgroundColor = "#FFDEAD"; //⾼亮匹配到的this.parentNode.style.display = 'block';} else {// this.nextSibling.style.backgroundColor = "";this.parentNode.style.display = 'none'; //隐藏不匹配的}});} else if(search_contract_name || search_contract_code) { //只有⼀个输⼊框有值search_contract_name = search_contract_name.length ? search_contract_name : 'xxx'; //默认为xxx是因为不可能存在xxxsearch_contract_code = search_contract_code.length ? search_contract_code.toLowerCase() : 'xxx';$("input[name='contract[]']").each(function () {var code_name = this.value;var search_code = code_name.toLowerCase().indexOf(search_contract_code);var search_name = code_name.toLowerCase().indexOf(search_contract_name);if (search_code >=0 || search_name >=0 ) {// this.nextSibling.style.backgroundColor = "#FFDEAD";this.parentNode.style.display = 'block';} else {// this.nextSibling.style.backgroundColor = "";this.parentNode.style.display = 'none';}});}}更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

【Vue.js】基于vue的实时搜索，在结果中高亮显示关键词

【Vue.js】基于vue的实时搜索，在结果中⾼亮显⽰关键词⼀、搜素效果如下：⼆、核⼼ 1）利⽤oninput属性来触发搜素功能 2）利⽤RegExp来对字符串来全局匹配关键字，利⽤replace⽅法来对匹配的关键字进⾏嵌⼊⾼亮的<span class="gaoliang">标签，最后利⽤v-html来嵌⼊html 标签来达到关键字⾼亮显⽰ 3）利⽤axios.CancelToken来终⽌上⼀次的异步请求，防⽌旧关键字查询覆盖新输⼊的关键字查询结果。

三、代码 1）HTML 搜索框部分绑定input事件（搜索框独⽴出来，作为⼀个基础组件（叫SearchToolbar.vue），嵌⼊到KnowledgeSearch.vue中）<input type="text" class="input-search" placeholder="请输⼊搜索内容" v-model.trim="searchKey" @input="searchEvent" ref="searchInput" autocomplete="off" autocapitalize="off" autocorrect="off"/> 2）因为input绑定了输⼊监听事件@input，每⼀次输⼊值的改变，都会触发⽅法searchEvent()，尤其是在输⼊搜索关键字的时候，这种情况必然发⽣发送多次http异步请求，这样频繁地请求会导致流量损耗与性能下降。

如何解决？我们利⽤setTimeout与clearTimeout元素，控制输⼊间隔为500ms，如果超过500s还没输⼊任何东西，就会向后端发送http异步请求。

例如在搜索框种输⼊1，然后500ms过去之后，就会发送异步请求，如果在输⼊1之后的500ms输⼊值，例如我在499ms输⼊了值‘2’，那么上⼀次关键字为1的异步请求就会取消，进⽽进⾏关键字为‘12’的异步请求，并等待500ms。

9个实用的Javascript代码高亮脚本

9个实用的Javascript代码高亮脚本代码高亮很有用，特别是在需要在网站或者blog中显示自己编写的代码的时候，或者给其他人查看或调试语法错误的时候。

我们可以将代码高亮，以便阅读者可以十分方便的读取代码块，增加用户阅读代码的良好体验。

目前，有很多免费而且有用的代码高亮脚本。

这些脚本大多是由Javascript语言编写，也有些使用其它语言(比如java、Phyton或Ruby)等写的。

下面来推荐最受欢迎、最实用的9个Javascript代码高亮脚本。

1. SyntaxHighlighter我相信这是最普遍代码高亮代码。

它支持多种不同的语言，而且如果你使用的语言不被默认支持，你也可以很简单的创建新“刷子”。

2. SHJSSHJS是Syntax Highlighting in Javascript的简写。

It 来自于GNU 源码高亮语言。

并支持很多种编程语言。

经测试SHJS 支持主流浏览器比如Firefox 2+, IE 6+, Opera 9.6+, Safari 3.2 及Chrome 1.0+.3. beautyOfCodebeautyOfCode 是一款jQuery 代码高亮插件。

它使用SyntaxHighlighter 的脚本，并使其更好的兼容XHTML。

4. ChiliChili 是一个jQuery代码高亮插件。

它捆绑了很多种语言支持，并支持多个设置选项。

5.Lighter.jsLighter.js是一款免费的MooTools代码高亮插件。

使用lighter.js 简单到只需要在你的页面中添加一段简单的脚本就OK了。

6. Highlight.jshighlight.js是一款非常容易使用的高亮脚本，支持多种编程语言。

它还有一些很有用的插件，很容易的部署到其它CMS、论坛或博客。

7. DlHighlightDlHighlight是一款简单的代码高亮脚本，它只支持4种编程语言：JavaScript, CSS, XML, HTML.8. Google Code PrettifyGoogle Code Prettify 有一个JavaScript模型和CSS文件，支持HTML页面中的语法高亮。

javascript高亮效果的二种实现方法

}
window.onload = function()
{
highLight(document.getElementsByTagName("p")[0],"li,jin");
}
//-->
</script>
</head>
<body>
<p>liujinzhong liujinzhong liuzhong</p>
var keyword = document.body.createTextRange();
while(keyword.findText(nWord)){
keyword.pasteHTML("<span style='color:red;'>" + keyword.text + "</span>");
keyword.moveStart('character',1);
}
}
}
function highword(nWord){
var array = nWord.split(",");
for(var i=0;i<array.length;i++){
HighLight(array[i]);
}
}
</script>
<!--
function highLight(ele,keys)
{
var reg = new RegExp("(" + keys.replace(/,/,"|") + ")","g");

高亮显示代码

很多网站或者博客都把代码原样像是出来，并且高亮显示关键字，今天给大家介绍一个著名的高亮显示代码SyntaxHighlighter 3.0.83。

本人使用的是2.0版本，大多数人使用的1.5版本。

截至到今天最新版本是3.0。

下面发一个demo是以3.0为例的demo。

1：首先在head标记中导入必备的css文件及js文件<script type="text/javascript" src="/highlighter3083/scripts/shCore.js"></script><script type="text/javascript" src="/highlighter3083/scripts/shBrushJScript.js"></script><link type="text/css" rel="stylesheet" href="/highlighter3083/styles/shCoreDefault.css" /><script type="text/javascript">SyntaxHighlighter.all();</script>2：选择要显示的语言js，对于程序员来说一下几种是比较常用的，可以全部加载，可以用哪些加载哪些。

附加了语言对照图。

大家可以去scripts文件夹中找对应的js代码<script type="text/javascript" src="/highlighter3083/scripts/shBrushJScript.js"></script><script type="text/javascript" src="/highlighter3083/scripts/shBrushCSharp.js"></script><script type="text/javascript" src="/highlighter3083/scripts/shBrushCss.js"></script><script type="text/javascript" src="/highlighter3083/scripts/shBrushSql.js"></script><script type="text/javascript" src="/highlighter3083/scripts/shBrushXml.js"></script>3：拿SQL举例，SQL配置class名称就是【class="brush: sql;"】4：运行下demo吧。

VSCode代码高亮突显关键字

VSCode代码高亮突显关键字现今，编写代码已经成为了人们工作和学习中的重要组成部分。

为了提高工作效率和代码的质量，程序员们通过使用各种编辑器和开发环境来进行代码编写和调试。

其中，Visual Studio Code (简称VSCode)作为一款轻量级、开源且功能强大的代码编辑器，受到了广大开发者的喜爱。

VSCode作为一款强大的编辑器，提供了许多有用的功能，其中之一就是代码高亮突显。

代码高亮突显是指根据语法规则，将代码中的不同元素呈现为不同的颜色或样式，使得开发者能够更加清楚地辨认和理解代码的结构和逻辑。

首先，代码高亮突显可以提高代码的可读性。

通过对不同类型的代码元素进行突显，如关键字、变量名、函数名等，使得代码的结构更加清晰，开发者能够快速地定位和理解代码的功能和作用。

例如，在使用VSCode编写JavaScript代码时，关键字如if、for、switch等会被高亮显示，使得代码逻辑更加直观。

其次，代码高亮突显也可以减少代码错误。

在编写代码时，我们往往会遇到拼写错误或使用了未定义的变量等问题。

通过代码高亮突显，这些错误会立即显现出来，提醒开发者需要进行修正。

例如，在使用VSCode编写Java代码时，若变量名未定义，它会以不同的颜色显示，让开发者意识到错误并及时修改，从而减少了出错的可能性。

另外，VSCode还提供了丰富的扩展插件，进一步增强了代码高亮突显的功能。

通过安装适用于不同编程语言的插件，开发者可以获得更加定制化和精细化的代码高亮体验。

例如，通过安装Python相关插件，VSCode可以对Python代码进行更加详细的语法突显，不仅突出了关键字，还能标注出类、函数等不同的代码元素，提供了更好的编程体验。

综上所述，VSCode代码高亮突显关键字是一项极为有用的特性。

它提高了代码的可读性，减少了错误的发生，并且通过插件扩展可以满足不同编程语言的需求。

对于开发者而言，掌握和善用代码高亮突显功能，能够提升编码效率和质量，使得编写代码变得更加轻松和愉快。