js RegExp 搜索并高亮关键字

最新推荐文章于 2024-04-24 21:48:46 发布
最新推荐文章于 2024-04-24 21:48:46 发布
阅读量687 收藏
点赞数
文章标签： js string.replace RegExp 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sujia13/article/details/51537338
版权

对于html页面结构字符串，形如"<p>test span<span class='test'>test</span></p>".

搜索tag内容中的关键字，如搜索span，结果为"<p>test span<span class='test'>test</span></p>"中高亮的部分，而忽略span标签。


可用如下正则表达式完成


data = "<p>test span<span class='test'>test</span></p>";

data = data.replace( new RegExp("span(?![^<>]*>)", 'g'), "<b>$1</b>");
其中正则表达式的后半部分(?!exp) 零宽负向断言，排除关键字出现在tag内部的情况


sujia13
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML高亮关键字的实现代码
01-19
本以为一个 innerHTML replace 就能实现的简单操作，却遇到了许多的问题。本文就记录这些问题和最终的完美解决办法， 希望能对有同样遭遇的小伙伴有所帮助。只对结果感兴趣的，忽略过程，直接跳过看结果吧~ 常用做法：正则替换 思路：要想高亮元素，那么需要将关键字提取出来用标签包裹，然后对标签进行样式调整。使用 innerHTML，或 outHTML, 而不能使用 innerText,outText。 const regex = new RegExp(keyword,g) element[removed] = element[removed].replace(regex,<b
清除所有被点击的高亮
zp200146的博客
04-08 164
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
JointJS点击选中元素高亮显示
风如也的博客
07-25 3056
使用 JointJs 时，当我们点击了选中的元素时，如果我们需要对点击元素高亮显示，点击空白处取消高亮显示的话，可以继续往下看代码实现。 官方文档相关部分： highlighters events 主要实现： // 点击空白区域取消高亮 this.paper.on('blank:pointerclick', () => { this.graph.getCells().forEach(cell => { highlighters.mask.remove(cell.findView(th
取消Button点击高亮效果
qq_36924683的博客
11-28 1192
创建一个不突出显示的自定义ButtonStyle struct StaticButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label } } 调用及Demo Button(action: { // 需要执行的点击事件 }, label: { Text("点击按钮") }) // 调用 .b.
搜索关键字高亮 | 处理方法
m0_74228110的博客
04-20 54
正则表达式 // 中间的内容都会当作匹配字符来使用，而不是数据变量，如果需要根据数据变量动态的创建正则表达式，则手动 new RegExp。参数2：匹配模式，要写到字符串中 g 全局，i 忽略大小写。参数1：匹配模式字符串，它会根据这个字符串创建正则对象。RegExp 是原生 JavaScript 的内置构造函数。// 不加上这个判断会出错！RegExp 正则表达式构造函数。
用JavaScript正则表达式匹配对应字符串高亮显示，并过滤掉空格、＜、＞等HTML节点符号
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
06-29 1357
需要将字符串'为中华崛起而写代码，此刻我想要高亮两个字“中国”,但是“中国”后面的箭头'中的‘中国’高亮加粗显示，但是又不想把< >符号误认为html节点标签渲染出来，代码如下，主要是用..................
匹配搜索关键高亮 new RegEXP 填坑
ymumi的博客
07-18 3545
需求：在搜索框输入关键字，点击搜索查找内容，在正文中匹配搜索关键字的内容高亮显示 使用 new RegEXP 实现 matchKeyword (searchKeyword, value) { // searchKeyword搜索关键字, value正文内容 if (value) { value = value + '' //转化为字符串类型 } ...
忽略html标签（特殊&#等。替换过滤处理），搜索关键字并高亮显示，带锚点定位（实现ctrl+F）的功能。两种方法（正则表达式，range方法）
Blue54的博客
10-09 1001
这边的pickUp和pickDown就是ctrl+F中的下一个关键词和上一个关键词，我这边是自己写了个按钮点击事件去执行它，num写着玩的。2.在通过match去获取有几个id为test_idconese的标签。并且遍历修改每个标签的ID添加index区别索引，用来后面锚点定位使用。这边就是忽略标签直接匹配内容的部分，val为你搜索的内容文字。test就是你搜索按钮点击事件，val既搜索框的内容。根据id去定位到锚点所在位置。
JavaScript(RegExp 对象) 特定字符高亮:new RegExp()
Jadeon
05-02 4060
JavaScript RegExp 对象操作实例：HTML代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src=
HTML高亮关键字的完美解决方案
12-14
最近做项目遇到这样的一个功能：在网页中高亮关键字。 本以为一个 innerHTML replace 就能实现的简单操作，却遇到了许多的问题。本文就记录这些问题和最终的完美解决办法， 希望能对有同样遭遇的小伙伴有所帮助。只...
Js-RegExp.rar_javascript_regexp
09-23
javascript 正则表达式案例，包含正则表达式源码，及应用。可以清楚的学习正则表达式。
JavaScript RegExp - 快速指南
04-23
JavaScript RegExp - 快速指南
js-regexp.rar_js regexp pdf
09-24
java regular expression, 正则表达式，讲述的非常清楚。
JavaScript-4.正则表达式、BOM
m0_46279684的博客
04-18 438
clearInterval()：用于停止setInterval()方法执行的函数代码。校验登录名：只能输入5-20个以字母开头、可带数字、"_"、"."的字符串。clearTimeout()：用于停止执行setTimeout()setInterval()：间隔指定的毫秒数不停地执行指定的代码。history.forward()：与在浏览器点击向前按钮相同。setTimeout()：暂停指定的毫秒数后执行指定代码。空白字符，包括\n,\r,\f,\t,\v等。正则表达式包含在"/"，"/"中。
MySQL数据库——17.正则表达式
weixin_66370632的博客
04-21 1026
MySQL正则表达式是一种强大的模式匹配工具，用于在文本数据中搜索和匹配特定的模式。MySQL使用正则表达式来执行模式匹配的操作，可以在SELECT语句的WHERE子句中使用，也可以在其他SQL语句中使用。
正则表达式学习笔记
qq_47326711的博客
04-20 773
正则表达式学习笔记
vue3表单参数校验+正则表达式
weixin_62980497的博客
04-18 472
邮箱就用目前用的邮箱正则表达式，要求一个或多个字母、数字或下划线，接着是 @ 符号，然后是一个或多个字母、数字或下划线，接着是一个句点，最后是一个或多个字母、数字或下划线。电话号码就用目前用的电话号码正则表达式，要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。我们要写在表单的上面，在<script setup></script>里面生效。我们的表单中有用户名、密码、电话号码、邮箱这四个项。我们设置用户名为3到20位的非空字符。
【Java 解析全国详细地址】Java 利用正则表达式完美解析全国省市区地址
最新发布
weixin_42254034的博客
04-24 167
OCR识别营业执照 获取详细地址并拆分。
韩顺平Java | C27 正则表达式
媛媛
04-18 322
需求：提取文本中某类字符传统方法：遍历每个字符，判断其是否在ASCII码中某种类型得编码范围内，代码量大，效率不高正则表达式(RegExp, regular expression)：处理文本的利器，是对字符串执行模式匹配的技术。java\javascript\php等语言都支持。
vue搜索关键字高亮
05-31
要实现在 Vue 中搜索关键字并高亮显示，可以按照以下步骤操作： 1. 在 Vue 组件中定义一个 data 属性，用于存储搜索关键字和需要搜索的数据列表。例如： ``` data() { return { keyword: '', dataList: [ 'Vue.js', 'React.js', 'Angular.js', 'Ember.js' ] } } ``` 2. 在模板中使用 v-model 指令绑定搜索框的值，并使用 v-for 指令循环渲染数据列表。例如： ``` <input type="text" v-model="keyword"> <ul> <li v-for="item in dataList" :key="item" v-html="highlight(item)"></li> </ul> ``` 3. 在 Vue 组件中定义一个方法，用于高亮显示搜索结果。该方法接收一个字符串参数，返回一个字符串，其中搜索关键字使用 span 标签包裹并设置样式。例如： ``` methods: { highlight(text) { if (!this.keyword) { return text } const regex = new RegExp(`(${this.keyword})`, 'gi') return text.replace(regex, '<span class="highlight">$1</span>') } } ``` 4. 在样式表中定义高亮样式，例如： ``` .highlight { background-color: yellow; } ``` 这样，在用户输入关键字时，模板会自动更新展示匹配的数据，并将搜索关键字高亮显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值