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

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

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

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

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

(emm……本人对前端不是很了解,下面代码仅限实现我自己的需求‍)

一、功能实现

1. html 网页具体代码:




    KeywordCrafter - 关键词匠心

    

KeywordCrafter - 关键词匠心


2. JavaScript部分:

3. 网页样式:

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

二、代码解析

(一)实现过程

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

  1. 页面结构:

    • 使用
      创建一个具有特定样式的区块,其中包含了页面元素。
    • 标签显示了页面的标题,且使用了text-align: center;来将标题居中显示。