博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
对文章进行搜索关键字过滤,并显示高亮的javascript实现方法之一
阅读量:6634 次
发布时间:2019-06-25

本文共 1578 字,大约阅读时间需要 5 分钟。

  1. 在不考虑关键字是特殊字符的情况下:
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('要检索的内容','检索的关键字','给内容中的关键字加上的有特殊标记的标签名')。

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

转载地址:http://bzdvo.baihongyu.com/

你可能感兴趣的文章
总结开发过程踩到的坑(一)
查看>>
数据库-oracle-数据库迁移
查看>>
java常见十大误区
查看>>
CSS: hover选择器的使用
查看>>
ThinkPHP 解决使用uploadify 在Firefox浏览器上传图片出现HTTP 302报错
查看>>
JDK1.7和JDK1.8对于异常的支持
查看>>
Java缓存框架---EhCache(基于Maven+Spring的EhCache入门教程)
查看>>
Three.js学习记录:创建三维场景
查看>>
Elementary OS使用Xkb修改按键映射,同时适用于其他使用Xkb库的Linux发行版
查看>>
Docker 及 GitLab CI 在前端工作流上的实践分享(二)
查看>>
Android网络编程之9Retrofit2前篇[基本使用]
查看>>
javascript设计模式--单例模式
查看>>
通过Maven配置生成个人项目Jar包(或者+依赖包)
查看>>
块存储、对象存储和文件系统: 它们对容器而言意味着什么?
查看>>
IOS渗透测试第一步-基础知识统一放送
查看>>
URL中?和# 的差别
查看>>
Hexo进阶高级教程(一)
查看>>
React 组件解耦之道
查看>>
20170614-数组去重
查看>>
Angular 4.x Router Link Directives
查看>>