用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
1
亲测，可用
修正编译安装SynEdit_2_0_8时出现的编码问题，并且支持DelphiX10.1 SynEdit 是一个高级的多行文本编辑控件，适用在 Delphi 和 Kylix 等开发环境。SynEdit 支持语法高亮、word-wrap、代码自动完成、模版组件、导出到 html 等格式的功能。 SynEdit 是一个纯 VCL/CLX 控件，无须任何其他运行库支持，著名的 HeidiSQL 数据库管理工具就是使用该控件开发的SQL编辑器。
2024-02-06 18:45:04
1.33MB
1
加载该OD插件后, 在反汇编区点击关键字时， 会高亮显示反汇编区的同样的关键字. 有点像vs2008IDE 点击单词高亮那样.
收集自互联网.
2022-12-19 19:13:19
13KB
1
有时SecureCRT窗口在输出串口信息或代码时，想要快速找到或定位某些关键字，本文将提供详细介绍
2021-05-30 12:01:57
460KB
1
用VS 2017做的一个c#关键字高亮和提示框功能，颜色，关键字，特殊分隔符都可以自定义，为了不上淘宝买下载资源，把自己的小项目贡献给大家，希望大家能原谅我收取部分积分，一键运行即可，源码简洁明了，有非常明确的注释
2021-04-21 09:01:54
31KB
1