用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现…不知道怎样来实现这样的功能啊?特此求助 代码如下:[removed]function highlight(key) { var key = key.split(‘|’); for (var i=0; i<key.length; i++) {  var rng = document.body.createTextRange();  while (rng. 在网页开发中,有时我们需要对文章中的特定关键字进行高亮显示,以便用户更容易发现和理解。这在搜索结果展示、文章阅读或者数据分析等场景中非常常见。本文将介绍如何使用JavaScript来实现这样的功能,主要围绕提供的代码进行解析和扩展。 让我们分析给出的JavaScript函数`highlight(key)`。这个函数的主要目的是接收一个包含多个关键字的字符串,然后遍历整个文档,找到这些关键字并将其高亮显示。`key`参数是以竖线(`|`)分隔的关键词列表。 ```javascript function highlight(key) { var key = key.split('|'); // 将关键词字符串分割成数组 ``` 在这里,`split('|')`方法被用来将传入的字符串按照分隔符`|`切割成一个数组,例如`['美容', '生活', '购物']`。 接着,我们使用`for`循环遍历这个关键词数组: ```javascript for (var i = 0; i < key.length; i++) { var rng = document.body.createTextRange(); while (rng.findText(key[i])) { // rng.pasteHTML(rng.text.fontcolor('red')); rng.pasteHTML(''); } } ``` 在循环内部,我们创建了一个`TextRange`对象`rng`,它代表文档中的一段文本。`findText(key[i])`方法用于查找当前关键词`key[i]`在文档中的出现位置。如果找到,就会进入`while`循环,将找到的关键字替换为高亮显示的HTML元素。 原代码中注释掉的部分`rng.pasteHTML(rng.text.fontcolor('red'));`原本会将找到的关键字改为红色,但这里被替换为一个带有边框的红色`div`,并包裹在一个`a`标签内,这样不仅可以高亮显示,还可以为用户提供可点击的链接(尽管链接地址设为了`#`,即当前页面)。 ```javascript rng.pasteHTML(''); ``` 这段代码将替换掉找到的关键字,并为其添加样式和属性。`title`属性提供了关键词的工具提示,`display:inline`确保高亮部分保持在文本流中,而不会破坏布局。 调用`highlight`函数时,你需要提供一个包含所有关键字的字符串,如`highlight('文章|关键|功能')`。 然而,需要注意的是,上述代码仅适用于IE浏览器,因为它使用了`TextRange`对象,这是Internet Explorer特有的。对于其他浏览器,如Firefox、Chrome、Safari等,可以使用`document.querySelectorAll`或`NodeIterator`结合正则表达式来实现类似功能。 例如,我们可以使用`querySelectorAll`配合`innerText`属性和正则表达式来替换文本: ```javascript function highlightModern(key) { const keys = key.split('|'); const regex = new RegExp(keys.join('|'), 'gi'); const elements = document.querySelectorAll('body *'); // 获取所有元素 for (const element of elements) { if (element.nodeType === Node.TEXT_NODE) { const text = element.textContent; const replacedText = text.replace(regex, function (match) { return '' + match + ''; }); element.textContent = replacedText; } } } // 添加CSS样式 document.head.insertAdjacentHTML('beforeend', ` `); highlightModern('文章|关键|功能'); ``` 这段代码首先创建了一个正则表达式来匹配所有的关键词,然后遍历所有页面元素,将匹配到的关键字替换为带有`highlight`类的`span`标签。添加一个CSS样式,使高亮背景颜色为黄色。 总结来说,JavaScript的高亮显示功能可以通过多种方法实现,具体取决于目标浏览器和需求。在处理静态页面且关键词可能变化的情况下,动态使用JavaScript来实现关键词高亮是一种可行的解决方案。
2025-06-03 17:38:53 25KB js代码
1
利用ICSharpCode.TextEditor.dll进行语法高亮显示开发的一个简单的Winform例子。开发工具VS2010。
2024-06-11 14:40:12 195KB 语法高亮显示
1
利用目标区域点的集合与外围自定义区域形成一个环形遮罩层,高亮显示所选行政区划,遮盖非目标区域。
2024-05-20 16:34:02 3KB 百度地图 高亮显示城市
1
在将php代码从编辑器复制到word或网页中时,得到的往往是纯黑的代码,让人看起来不舒服。分析起代码来也找不主次。所以写了个小程序来弥补这一点。麻雀虽小五脏俱全。将程序文件夹放在php主目录下,然后http://127.0.0.1/highlight,就能看到目录和php文件,点击php文件得到高亮的代码。能复制到word和网页中。
2023-11-26 09:02:28 858B word
1
高亮显示牛逼插件。测试过版本VS2010
2023-10-17 09:26:10 103KB vs 2010
1
jQuery自动滚动表格高亮显示代码是一款带有行点击,奇数行样式添加,偶数行样式添加,json初始化表格等功能。
2023-08-21 15:14:57 36KB jQuery 自动
1
1. 单关键字 匹配 如果只是单关键字的话,那么我们先计算出他的下标,它的长度,然后就可以标记下标到下标+长度的这一段为特殊颜色即可,代码如下: if (name != null && name.contains(keyWord)) { int index = name.indexOf(keyWord); int len = keyWord.length(); Spanned temp = Html.fromHtml(name.substring(0, index) + + name.substring(index, inde
2023-05-10 23:30:21 56KB android开发 id 关键
1
UltraEdit高亮显示多种语法 UltraEdit高亮显示多种语法 1、http://www.ultraedit.com/downloads/extras.html#wordfiles目录下有各种语法文件,将需要显示的语言的语法文件内容添加到安装目录的wordfile.uew中。 2、在ultraedit的高级-配置-编辑器显示-语法高亮,颜色选择中可以看到新添加的高亮显示语言,在词语列表的完整路径中显示了对应的wordfile.uew。 http://www.ultraedit.com/support/tutorials_power_tips/ultraedit/add_a_wordfile.html 注:如果附件下载不了,可以参考相应的网站。
2023-03-08 19:30:39 1.65MB UltraEdit 高亮显示
1
支持HTC Vive、版本新。 ** Built-in pipeline ** - Import the package from the folder /Builtin. - Requires Unity 2020.3 or later. ** Universal Rendering Pipeline ** - Import the package from the folder /URP - Requires Unity 2020.3 or later.
2023-02-25 22:08:49 18.37MB HighlightPlus HTCVive Unity2020.3
1
C#\ArcGIS Engine 可以实现以下功能 鼠标滑过显示要素 tip 通过鼠标选择要素并高亮显示在 MapControl 自由旋转地图弹出颜色选择器显示图层的属性窗口 ArcGIS Engine 实现鹰眼 等等
1