实现同时查找多个关键词——KeywordCrafter - 关键词匠心

实现同时查找多个关键词——KeywordCrafter - 关键词匠心

2024-10-31 20:18

具体功能：同时查找多个关键词，高亮加粗显示，并关键词显示出现次数。

🧐碎碎念：最近在写文案的时候，总是要避免出现一个敏感词汇，利用 (command+F) or (Ctr+F) 查找，只能一个一个单词去查，很麻烦。🤷‍♂️

所以我写了一个简单的网页，在文本框输入一整篇文章，在搜索框输入我想要查找的关键词，多个关键词用逗号 (,) 分隔开，并且统计该关键词出现次数。下面是效果图：

接下来我们具体实现一下。

（emm……本人对前端不是很了解，下面代码仅限实现我自己的需求👩‍💻）

大家可以自己添加替换背景图片。

主要通过Javascript实现了同时查找多个关键词的功能。让我来解释一下具体的实现过程：

页面结构：
- 使用创建一个具有特定样式的区块，其中包含了页面元素。
- 标签显示了页面的标题，且使用了来将标题居中显示。
- 标签创建了一个文本输入框，用户可以在这里输入要搜索的文章内容。
- 标签用于输入要搜索的关键词，设置了样式以调整宽度、高度和字体大小。
- 标签添加了一个按钮，点击按钮会触发函数。
- 两个标签用于显示搜索结果和关键词出现次数。
Javascript功能：
- 函数会在用户点击搜索按钮时触发。它会获取文本框中的文章内容和要搜索的关键词。
- 对于每个关键词，使用正则表达式在文章内容中查找匹配，并统计关键词出现的次数。
- 所有搜索到的关键词和出现次数会被保存在对象中。
显示结果：
- 函数将搜索结果显示在页面上。如果有搜索到的关键词，它会高亮显示出现在文章内容中的关键词，并在旁边显示关键词出现的次数。
- 如果没有搜索到关键词，将显示一个相应的提示信息。
高亮显示：
- 函数用于将文章内容中的关键词进行高亮显示。它通过正则表达式匹配关键词，并将匹配到的关键词用标签包裹起来，从而实现高亮效果。

通过Javascript实现了在文本内容中同时查找多个关键词，并将匹配到的关键词高亮显示以及统计关键词出现次数的功能。同时，HTML和CSS也被用于创建网页结构和样式。

当调用函数时，这段代码利用了正则表达式和循环，逐个查找关键词在文章中的出现次数，并将结果存储在一个对象中，用于后续的显示和统计。

获取输入内容：
- 这行代码获取了输入在id为"article"的文本框中的文章内容，并将内容转换为小写字母，方便后续的比较。
获取关键词：
- 这行代码获取了输入在id为"words"的文本框中的关键词，并将关键词以逗号为分隔符拆分成一个数组。
- 之后，将每个关键词转换为小写字母，以便进行不区分大小写的匹配。
创建一个空对象来存储找到的关键词和出现次数：
遍历每个关键词并执行查找：
- 在这个循环中，每个关键词都经过如下处理：
  - 使用创建一个正则表达式对象，用于去除关键词前后的空格。
  - 表示正则表达式会在全局范围内进行匹配（g：global）且不区分大小写（i：case-insensitive）。
  - 会匹配所有在中的关键词，并返回匹配数组。
  - 获取匹配数组的长度，即关键词在文章中出现的次数。
如果关键词出现次数大于0，则将关键词及其出现次数存储在对象中。
最后，调用函数来显示搜索结果。