对文章进行搜索关键字过滤，并显示高亮的javascript实现方法之一

AlienZHOU 发布于2019-08-23 14:09 / 1339人阅读

摘要：本篇文章主要用来记载工作项目中遇到的，本人觉得有必要记下来的知识点，方便在以后遇到时可以直接使用，也给遇到同样问题的其他人提供一个思路。

在不考虑关键字是特殊字符的情况下：

warpTag (content, keyword, tagName) {
      if (content === "No results") {
        return content
      }
      const a = content.toLowerCase()
      const b = keyword.toLowerCase()
      const indexof = a.indexOf(b)
      const c = indexof > -1 ? content.substr(a.indexOf(b), keyword.length) : ""
      const val = `<${tagName}>${c}`
      const regS = new RegExp(keyword, "gi")
      return content.replace(regS, val)
    }

调用的时候warpTag("要检索的内容","检索的关键字","给内容中的关键字加上的有特殊标记的标签名")

2.如果关键字允许是特殊字符的情况下，就要做区别处理，因为有些特殊字符在正则中有特殊含义（例如：^*+?等，具体可参考正则表达式手册）：

warpTag (content, keyword, tagName) {
    if (content === "") {
      return content
    }
    const a = content.toLowerCase()
    const b = keyword.toLowerCase()
    const indexof = a.indexOf(b)
    const c = indexof > -1 ? content.substr(a.indexOf(b), keyword.length) : ""
    const val = `<${tagName} class="keywords">${c}`
    let characterReg = /^.*[!~@#$%^&*(_)+-=`,./<>?;":"|[]{}].*$/
    let regS
    if (characterReg.test(keyword)) {
      if (keyword.length === 1) {
        regS = new RegExp("" + keyword, "gi")
      } else {
        let keywordNew = ""
        for (let i = 0; i < keyword.length; i++) {
          keywordNew += i < keyword.length - 1 ? keyword.substr(i, 1) + "" : keyword.substr(i, 1)
        }
        keyword = keywordNew
      }
      regS = new RegExp("" + keyword, "gi")
    } else {
      regS = new RegExp(keyword, "gi")
    }
    return content.replace(regS, val)
  }

使用方法同上：warpTag("要检索的内容","检索的关键字","给内容中的关键字加上的有特殊标记的标签名")。
本篇文章主要用来记载工作项目中遇到的，本人觉得有必要记下来的知识点，方便在以后遇到时可以直接使用，也给遇到同样问题的其他人提供一个思路。

GPU云服务器云服务器 javascript实现方法关键词高亮对腾讯云的服务器进行界面操作系统栏目高亮显示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100169.html

对文章进行搜索关键字过滤，并显示高亮的javascript实现方法之一

摘要：本篇文章主要用来记载工作项目中遇到的，本人觉得有必要记下来的知识点，方便在以后遇到时可以直接使用，也给遇到同样问题的其他人提供一个思路。在不考虑关键字是特殊字符的情况下： warpTag (content, keyword, tagName) { if (content === No results) { return content } ...

刘厚水 2019-08-02 13:54 评论0 收藏0
实现DataTables搜索框查询结果高亮显示

摘要：宋体三搜索框查询结果高亮显示的其他方法宋体。宋体四总结宋体实现搜索框查询结果高亮显示的功能需要引入文件，文中提供了种这类文件，并说明了要配套编写的相关代码。DataTables是封装好的HTML表格插件，丰富了HTML表格的样式，提供了即时搜索、分页等多种表格高级功能。用户可以编写很少的代码（甚至只是使用官方的示例代码），做出一个漂亮的表格以展示数据。关于DataTables的更多信息，请查...

番茄西红柿 2019-04-23 13:17 评论0 收藏0
一个前端开发工程师的Vim跟IDE一样

摘要：一组就是一个插件，的很多功能都由各式插件实现。与相反到行头到本行的第一个非字符到行尾到本行最后一个不是字符的位置。到逗号前的第一个字符。在当前行查找第三个出现的。工程文件菜单自定义快捷键显示文件菜单自带快捷键显示隐藏隐藏文件在新这里是我新配置出来的 jaywcjlove/vim-web 一直在打磨中，基本上可以用了。拿出来骗 star 先上图 showImg(https://segm...

Vultr 2019-06-28 10:19 评论0 收藏0
Jerry和您聊聊Chrome开发者工具

摘要：开发者工具是日常工作使用的三大调试器之一。当然我可以在开发者工具的标签页手动选中响应内容，然后，再到本地新建一个文件，。注开发者工具颜色的修改希望这篇文章能让您对开发者工具有一些更深入的了解，感谢阅读。 Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个开发者, 但是它对非开发人员仍然有用。不信？用Chrome打开我们常用的网站，按F12，在Con...

binta 2019-08-22 16:22 评论0 收藏0
Jerry和您聊聊Chrome开发者工具

摘要：开发者工具是日常工作使用的三大调试器之一。当然我可以在开发者工具的标签页手动选中响应内容，然后，再到本地新建一个文件，。注开发者工具颜色的修改希望这篇文章能让您对开发者工具有一些更深入的了解，感谢阅读。 Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个开发者, 但是它对非开发人员仍然有用。不信？用Chrome打开我们常用的网站，按F12，在Con...

Donald 2019-08-15 15:31 评论0 收藏0