用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
ECSHOP是一款开源的电子商务系统，被广泛应用于搭建在线购物平台。在SEO（搜索引擎优化）方面，关键词的内链管理对于提升网站排名和用户体验至关重要。"ecshop关键字自动内链插件_支持设置次数"就是一个针对ECSHOP系统的功能增强工具，专门用于自动化处理关键词内链。
一、关键词自动内链的原理与作用
关键词自动内链是通过程序自动检测并替换文本中的特定关键词，将其转化为内部链接，指向网站内的相关页面。这样做的好处包括：
1. 提升用户体验：用户在阅读文章时，看到感兴趣的关键字可以直接点击跳转到相关页面，获取更多信息。
2. 增强网站内部链接结构：合理的内链结构有助于搜索引擎理解网站内容层次，提升页面权重分布。
3. 提高搜索引擎排名：频繁出现的关键词内链有助于搜索引擎识别页面主题，从而提高关键词排名。
二、插件功能详解
该插件的主要特性是支持设置次数，这意味着用户可以根据需要自定义每个关键词在页面中出现的内链次数。过多的内链可能会被视为过度优化，而过少则可能无法充分利用内链的优势。通过设定次数，可以平衡这两者之间的关系，避免因操作不当导致的反效果。
1. 关键词管理：插件提供关键词添加、编辑和删除功能，允许管理员自由定制需要自动内链的关键词列表。
2. 链接目标设定：可为每个关键词指定一个或多个链接目标，确保内链的准确性和多样性。
3. 次数控制：核心功能，设置每个关键词在文章中自动内链的最大次数，防止过度优化。
4. 实时更新：一旦开启插件，系统会自动在新发布或更新的内容中应用这些设置，无需手动操作。
三、安装与使用
在下载并解压"ECShop关键字自动内链插件_支持设置次数"压缩包后，通常按照以下步骤进行安装：
1. 将解压得到的插件文件上传至ECSHOP系统的相应目录，如“plugins”目录下。
2. 在后台管理界面启用插件，进行配置，包括设置关键词、链接目标以及内链次数。
3. 测试插件功能，确保关键词替换正确且符合预期。
四、注意事项
1. 避免关键词堆砌：设置内链次数时，要考虑到关键词密度，防止过度优化，以免被搜索引擎视为垃圾内容。
2. 相关性原则：确保关键词与链接目标页面内容高度相关，提高用户体验和搜索引擎友好度。
3. 定期检查：定期查看内链效果，评估是否需要调整关键词或次数设置。
综上，"ecshop关键字自动内链插件_支持设置次数"是ECSHOP商家优化网站SEO、提升用户体验的有效工具。通过合理使用，可以在不增加额外工作负担的同时，改善网站的整体性能。
2024-10-21 21:53:50
28KB
1
内容页关键字加上链接是现在网站最基本的功能啦，不知道为啥帝国cms官方一直没有加上不过现在有这样的插件
2024-07-14 11:48:53
217KB
1
情感分析
一个基本的情绪分析器会从twitterAPI中获取推文，并对其进行分析，并显示有多少推文支持该推文，而有多少则不支持该特定关键字。一次分析10条推文。 Textblob库用于分析目的。
复制您的不记名令牌。
打开终端，然后键入以下命令。
export BEARER_TOKEN = {您的BEARER TOKEN}
2024-06-04 12:34:14
2KB
1
文件描述:Xshell软件(配色方案&高亮关键字/突出显示集)的相关文件
适用人群：所有IT计算机行业人群，重点突出用户为“网络工程师、运维工程师、弱点工程师、云计算工程师、网络安全工程师等技术人员”
软件适用版本：**所有Xshell 7的版本**，以下或7以后的版本未经过测试，可自行尝试。
2024-05-19 18:17:00
3KB
1
关键字输入，生成处方，方剂学习，关键词搜索，全文检索，中医app软件七万多方剂
2024-04-21 16:05:55
104.37MB
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