忽略html标签（特殊&#等。替换过滤处理），搜索关键字并高亮显示，带锚点定位（实现ctrl+F）的功能。两种方法（正则表达式，range方法）

已于 2022-10-11 14:09:35 修改
阅读量1.1k 收藏
点赞数
分类专栏： js 2022Vue学习笔记 文章标签： css 前端 javascript vue.js
于 2022-10-09 10:40:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Blue54/article/details/127222388
版权

目录

方法1：使用纯正则替换

1.重点代码:

2.普通版完整函数（不带不可见字符&#情况）：

3.进阶版完整函数（word导入后或者有时候带了&#不可见字符转文字的情况下）：

4.decoders函数：

5.锚点部分:

6.锚点定位的使用：

7.定位的主要代码在

8.锚点完整代码： 

方法2：使用文本替换锚点后。使用range方法实现切换高亮。（防止数据太多。导致上下切换高亮卡顿）

1.替换&#不可见生成的字符（例如🳃；等之类的）并替换掉标签。使所有关键词高亮。

2.高亮的方法函数（默认第一个高亮）：

  3.切换上一个和下一个（不卡顿）

 文章内容大致为：通过v-html渲染的页面。

data中的某些值：

关于方法2的知识点参考：http://t.csdn.cn/DT92m

方法1：使用纯正则替换

1.重点代码:

这边就是忽略标签直接匹配内容的部分，val为你搜索的内容文字

  const reg = new RegExp(val, 'g')
            this.detailLi.content = this.detailLi.content.replace(new RegExp('(?=\>).+?(?=\<)', 'g'), function (str) {
              const reg1 = new RegExp('(?=>).+', 'g')
              return str.replace(new RegExp('(>).+', 'g'), function (str2) {
                return str2.replace(reg1, function (str1) {
                  return str1.replace(reg, '<em style="background-color: yellow">' + val + '</em>')
                })
              })
            })

2.普通版完整函数（不带不可见字符&#情况）：

test就是你搜索按钮点击事件，val既搜索框的内容

     test (val, x) {
          this.pickNum = 0
          if (val !== '') {
            if (this.searData !== '') {
              this.detailLi.content = this.searData
            } else {
              this.searData = this.detailLi.content
            }
            const reg = new RegExp(String(val), 'g')
            //正则校验除了标签之外
            this.detailLi.content = this.detailLi.content.replace(new RegExp('(?=\>).+?(?=\<)', 'g'), function (str) {
              const reg1 = new RegExp('(?=>).+', 'g')
              return str.replace(new RegExp('(>).+', 'g'), function (str2) {
                return str2.replace(reg1, function (str1) {
                  //这边是判断乱码过滤（&#36830;&#25509;&#25968;&#25454;&#24211;&#25104;&#21151;&#65281;）正则校验除了这种的之外
                  return str1.replace(new RegExp('^((?!(?=\&).+?(?=\;)).)*$','g'),function (str0) {
                    return str0.replace(reg, `<span id="test_idconese" style="background-color: #00a4ff">${val}</span>`)
                  })
                })
              })
            })
            const value2 = new RegExp('test_idconese', 'gi')
            this.allData = this.detailLi.content.match(value2)
            if (this.allData && this.allData.length > 0) {
              this.allData.forEach((item, index) => {
                this.detailLi.content = this.detailLi.content.replace('test_idconese', `test_${index}idconese`)
              })
            }
            this.detailLi.content = this.detailLi.content.replace('<span id="test_0idconese" style="background-color: #00a4ff">', '<span id="test_0idconese" style="background-color: red">')
          } else {
            this.allData = []
          }
          if (x) {
            if (this.searData !== '') {
              this.detailLi.content = this.searData
            } else {
              this.searData = this.detailLi.content
            }
          }
        },

3.进阶版完整函数（word导入后或者有时候带了&#不可见字符转文字的情况下）：

 test为完整函数：里面的decoders事件写在后面。

 test (val, x, keyWord) {
          const that = this
            this.pickNum = 0
            if (val !== '') {
              if (this.searData !== '') {
                this.detailLi.content = this.searData
              } else {
                this.searData = this.detailLi.content
              }
              const reg = new RegExp(val, 'g')
              // 正则校验先乱码过滤（&#36830;&#25509;&#25968;&#25454;&#24211;&#25104;&#21151;&#65281;）正则校验除了这种的之外
              this.detailLi.content = this.detailLi.content.replace(new RegExp('(?=\>).+?(?=\<)', 'g'), function (dades) {
                if (dades.indexOf('&#') !== -1) {
                  return dades.replace(new RegExp('((?=\&).+?)(?=\;)+\;', 'g'), function (s) {
                    const tihuan = that.decoders(s)
                    return dades.replace(dades, `${tihuan}`)
                  })
                } else {
                  return dades
                }
              })
              // 正则校验除了标签之外
              this.detailLi.content = this.detailLi.content.replace(new RegExp('(?=\>).+?(?=\<)', 'g'), function (str) {
                const reg1 = new RegExp('(?=>).+', 'g')
                return str.replace(new RegExp('(>).+', 'g'), function (str2) {
                  console.log(str2, 'str22')
                  return str2.replace(reg1, function (str1) {
                    console.log(str1.indexOf('&#'), str1, 'str2')
                    return str1.replace(reg, `<span id="test_idconese" style="background-color: #00a4ff">${val}</span>`)
                    // if (str1.indexOf('&#') !== -1) {
                    //   return str1.replace(new RegExp('(?<=;)[^&]+(?=&)', 'g'), function (str0) {
                    //     return str0.replace(reg, `<span id="test_idconese" style="background-color: #00a4ff">${val}</span>`)
                    //   })
                    // } else {
                    //   // 这边是判断乱码过滤（&#36830;&#25509;&#25968;&#25454;&#24211;&#25104;&#21151;&#65281;）正则校验除了这种的之外
                    //   return str1.replace(new RegExp('^((?!((?=\&).+?)(?=\;)).)*$', 'g'), function (str0) {
                    //   })
                    // }
                  })
                })
              })
              const value2 = new RegExp('test_idconese', 'gi')
              this.allData = this.detailLi.content.match(value2)
              if (this.allData && this.allData.length > 0) {
                this.allData.forEach((item, index) => {
                  this.detailLi.content = this.detailLi.content.replace('test_idconese', `test_${index}idconese`)
                })
              }
              this.detailLi.content = this.detailLi.content.replace('<span id="test_0idconese" style="background-color: #00a4ff">', '<span id="test_0idconese" style="background-color: red">')
              this.$nextTick(function () {
                if (this.$el.querySelector('#test_0idconese')) {
                  this.$el.querySelector('#test_0idconese').scrollIntoView({
                    behavior: 'smooth',
                    inline: 'nearest',
                  })
                }
              })
            } else {
              this.allData = []
            }
            if (x) {
              if (this.searData !== '') {
                this.detailLi.content = this.searData
              } else {
                this.searData = this.detailLi.content
              }
            }
        },

4.decoders函数：

&#特殊字符转文字的方法：

  // &#编码转文字
        decoders (str) {
          var tempArr = str.split(/\&#|\;/)
          console.log(str, tempArr, 'tem')
          var tmpLength = tempArr.length
          var str = ''
          for (var i = 0; i < tmpLength; i++) {
              if (tempArr[i] != '') {
              str += String.fromCharCode(tempArr[i])
            }
          }
          return str
            },

5.锚点部分:

1.先对所有匹配的内容添加统一相同的ID：

 return str1.replace(reg, `<span id="test_idconese" style="background-color: #00a4ff">${val}</span>`)

2.在通过match去获取有几个id为test_idconese的标签。并且遍历修改每个标签的ID添加index区别索引，用来后面锚点定位使用。

const value2 = new RegExp('test_idconese', 'gi')
            this.allData = this.detailLi.content.match(value2)
            if (this.allData && this.allData.length > 0) {
              this.allData.forEach((item, index) => {
                this.detailLi.content = this.detailLi.content.replace('test_idconese', `test_${index}idconese`)
              })
            }

6.锚点定位的使用：

这边的pickUp和pickDown就是ctrl+F中的下一个关键词和上一个关键词，我这边是自己写了个按钮点击事件去执行它，num写着玩的。没有用。

7.定位的主要代码在

根据id去定位到锚点所在位置。

this.$el.querySelector('#test_0idconese').scrollIntoView({
              behavior: 'smooth',
              inline: 'nearest',
            })

8.锚点完整代码： 

  pickUp (num) {
          if (this.pickNum > 0) {
            this.pickNum = this.pickNum - 1
            this.detailLi.content = this.detailLi.content.replace(`<span id="test_${this.pickNum}idconese" style="background-color: #00a4ff">`, `<span id="test_${this.pickNum}idconese" style="background-color: red">`)
            this.detailLi.content = this.detailLi.content.replace(`<span id="test_${(this.pickNum + 1)}idconese" style="background-color: red">`, `<span id="test_${(this.pickNum + 1)}idconese" style="background-color: #00a4ff">`)
            this.$el.querySelector(`#test_${this.pickNum}idconese`).scrollIntoView({
              behavior: 'smooth',
              inline: 'nearest',
            })
          } else if (this.pickNum === 0) {
            this.$el.querySelector('#test_0idconese').scrollIntoView({
              behavior: 'smooth',
              inline: 'nearest',
            })
          }
        },
        pickDown (num) {
          if (this.pickNum < this.allData.length - 1) {
            this.pickNum = this.pickNum + 1
            this.detailLi.content = this.detailLi.content.replace(`<span id="test_${this.pickNum}idconese" style="background-color: #00a4ff">`, `<span id="test_${this.pickNum}idconese" style="background-color: red">`)
            this.detailLi.content = this.detailLi.content.replace(`<span id="test_${(this.pickNum - 1)}idconese" style="background-color: red">`, `<span id="test_${(this.pickNum - 1)}idconese" style="background-color: #00a4ff">`)
            this.$el.querySelector(`#test_${this.pickNum}idconese`).scrollIntoView({
              behavior: 'smooth',
              inline: 'nearest',
            })
          } else if (this.pickNum === 0) {
            this.$el.querySelector('#test_0idconese').scrollIntoView({
              behavior: 'smooth',
              inline: 'nearest',
            })
          }
        },

方法2：使用文本替换锚点后。使用range方法实现切换高亮。（防止数据太多。导致上下切换高亮卡顿）

1.替换&#不可见生成的字符（例如&#130243；等之类的）并替换掉标签。使所有关键词高亮。

  test (val, x, keyWord) {
          const that = this
            this.pickNum = 0
            if (val !== '') {
              if (this.searData !== '') {
                this.detailLi.content = this.searData
              } else {
                this.searData = this.detailLi.content
              }
              const reg = new RegExp(val, 'g')
              // 正则校验先乱码过滤（&#36830;&#25509;&#25968;&#25454;&#24211;&#25104;&#21151;&#65281;）正则校验除了这种的之外
              this.detailLi.content = this.detailLi.content.replace(new RegExp('(?=\>).+?(?=\<)', 'g'), function (dades) {
                if (dades.indexOf('&#') !== -1) {
                  return dades.replace(new RegExp('((?=\&).+?)(?=\;)+\;', 'g'), function (s) {
                    const tihuan = that.decoders(s)
                    return dades.replace(dades, `${tihuan}`)
                  })
                } else {
                  return dades
                }
              })
              // 正则校验除了标签之外
              this.detailLi.content = this.detailLi.content.replace(new RegExp('(?=\>).+?(?=\<)', 'g'), function (str) {
                const reg1 = new RegExp('(?=>).+', 'g')
                return str.replace(new RegExp('(>).+', 'g'), function (str2) {
                  return str2.replace(reg1, function (str1) {
                    return str1.replace(reg, `<span id="test_idconese" style="background-color: #00a4ff">${val}</span>`)
                  })
                })
              })
              const value2 = new RegExp('test_idconese', 'gi')
              this.allData = this.detailLi.content.match(value2)
              if (this.allData && this.allData.length > 0) {
                this.allData.forEach((item, index) => {
                  this.detailLi.content = this.detailLi.content.replace('test_idconese', `test_${index}idconese`)
                })
              }
                //dom生成完毕后在执行的函数
              this.$nextTick(function () {
                if (this.$el.querySelector('#test_0idconese')) {
                  this.$el.querySelector('#test_0idconese').scrollIntoView({
                    behavior: 'smooth',
                    inline: 'nearest',
                  })
                }
                //高亮的方法
                this.upGaGaLiang(val)
              })
            } else {
              this.allData = []
            }
            //判断是否点击了关闭
            if (x) {
              if (this.searData !== '') {
                this.detailLi.content = this.searData
              } else {
                this.searData = this.detailLi.content
              }
            }
        },

2.高亮的方法函数（默认第一个高亮）：

 // 高亮
        upGaGaLiang (val) {
          this.range = document.createRange()
          const container = document.getElementById('htmlcontent')
          const allText = container?.innerText
          this.inputValue = val
          if (allText && allText.includes(this.inputValue)) {
            // 获取所有节点
            const containerAllNode = container.childNodes
            // 用于保存找到的节点
            this.findNode = []
            for (let i = 0; i < containerAllNode.length; i++) {
              // 遍历查询节点
              if (containerAllNode[i].textContent?.includes(this.inputValue)) {
                this.findNode.push(containerAllNode[i])
              }
            }
            // 默认选中第一个
            if (this.findNode && this.findNode.length > 0) {
              const startNode = document.getElementById('test_0idconese').firstChild
              if (startNode) {
                this.range.setStart(startNode, 0)
                this.range.setEnd(startNode, this.ritKeyWord.length)
                const selection = window.getSelection()
                selection?.removeAllRanges()
                selection?.addRange(this.range)
              }
              // this.setSelect(0)
            }
          } else {
          }
        },

  3.切换上一个和下一个（不卡顿）

 pickUp (num) {
          if (this.pickNum > 0) {
            this.pickNum = this.pickNum - 1
            if (document.getElementById((`test_${this.pickNum}idconese`))) {
              const startNode = document.getElementById(`test_${this.pickNum}idconese`).firstChild
              if (startNode) {
                this.range.setStart(startNode, 0)
                this.range.setEnd(startNode, this.ritKeyWord.length)
                const selection = window.getSelection()
                selection?.removeAllRanges()
                selection?.addRange(this.range)
              }
              this.$el.querySelector(`#test_${this.pickNum}idconese`).scrollIntoView({
                behavior: 'smooth',
                inline: 'nearest',
              })
            }
          } else if (this.pickNum === 0) {
            if (document.getElementById('test_0idconese')) {
              const startNode = document.getElementById('test_0idconese').firstChild
              if (startNode) {
                this.range.setStart(startNode, 0)
                this.range.setEnd(startNode, this.ritKeyWord.length)
                const selection = window.getSelection()
                selection?.removeAllRanges()
                selection?.addRange(this.range)
              }
              this.$el.querySelector('#test_0idconese').scrollIntoView({
                behavior: 'smooth',
                inline: 'nearest',
              })
            }
          }
        },
        pickDown (num) {
          if (this.pickNum < this.allData.length - 1) {
            this.pickNum = this.pickNum + 1
            if (document.getElementById(`test_${this.pickNum}idconese`)) {
              const startNode = document.getElementById(`test_${this.pickNum}idconese`).firstChild
              if (startNode) {
                this.range.setStart(startNode, 0)
                this.range.setEnd(startNode, this.ritKeyWord.length)
                const selection = window.getSelection()
                selection?.removeAllRanges()
                selection?.addRange(this.range)
              }
              this.$el.querySelector(`#test_${this.pickNum}idconese`).scrollIntoView({
                behavior: 'smooth',
                inline: 'nearest',
              })
            }
          } else {
            if (this.allData.length && this.allData.length > 0) {
              if (document.getElementById(`test_${(this.allData.length - 1)}idconese`)) {
                const startNode = document.getElementById(`test_${(this.allData.length - 1)}idconese`).firstChild
                if (startNode) {
                  this.range.setStart(startNode, 0)
                  this.range.setEnd(startNode, this.ritKeyWord.length)
                  const selection = window.getSelection()
                  selection?.removeAllRanges()
                  selection?.addRange(this.range)
                }
              }
            }
          }
        },

 文章内容大致为：通过v-html渲染的页面。

  <div ref="htmlcontent" class="htmlcontent" id="htmlcontent" v-html="detailLi.content" />

data中的某些值：

data(){
    return{
          inputValue: '',
          findNode: [],
          index: -1,
          range: null,
          ritKeyWord:''，//搜索的关键词
}
}

关于方法2的知识点参考：http://t.csdn.cn/DT92m

Ciwei蓝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html正则表达式search,正则表达式解析关键字和标签的搜索字段（[]）
weixin_30802819的博客
06-03 269
认为你需要像这样：/(?:\[([^\]]*)\]|([^\s]+))/g您可以重复应用它(例如，使用Javascript可执行方法)，然后从第一个和第二个捕捉器中提取值g组分别捕获标签和关键字。试试看这里：为了解释：最外层()括起来的任一标签匹配的一个选择或关键字((由方括号[]括起来)没有用方括号括起来)。由于我们需要明确知道匹配的表达式是标记还是关键字，因此需要为每个捕获组分别设置一个单独的...
前端实现ctrl+F搜索效果
usernotdefined的博客
01-26 2076
原理 根据搜索关键字keyword将原有文本替换成高亮highlight样式的标签。 找出全部带有高亮highlight样式的标签作为keywordNodes高亮关键字dom节点数组。 currentActiveNodeIndex记录当前激活的关键字节点，点击上一条或下一条对激活的索引currentActiveNodeIndex进行操作。同时记得为激活的节点添加选中的样式。web利用scrollIntoView()滚动至可视窗口，小程序利用wx.pageScrollTo() web案例 源码 &l
js实现仿Ctrl+f功能
qq_41533659的博客
12-17 3275
最近项目需要实现类似电脑自带的ctrl+f功能，在网上找了些，自己改了些，粗略能实现。第一次写，别喷！ HTML页面 <input class="form-control" type="text" placeholder="输入关键字" id="keyword" autocomplete="off"> <input class="form-control" type="text" style="width:55px;padding:0;margin-left:-5px;" id="flag
html页面调用ctrl f,javascript实现浏览器Ctrl+F页面搜索功能
weixin_34922053的博客
06-03 1852
html结构代码搜索这是要搜索的内容哦！！javascript代码var content = $('#content').html();$('#search-btn').click(function () {$('#content').html(content);var searchText = $('#search').val();if (searchText.length == 0) {ret...
html 忽略标签,处理HTML块，忽略特定标签内的内容
weixin_31499719的博客
06-25 505
我想到的第一个解决方案如下所示：提取所有代码删除代码，用一个特殊的标记代替它们，不会受到字符串操作的影响 - 该标记必须非常特殊(并且可以验证它不存在于输入字符串中，btw) >在字符串上执行操作放回代码，现在有标记UL>在代码中，它可能是这样的：(对不起，这是相当长的 - 我没有包括任何支票;这取决于你添加这些)$str = <<Lorem ipsum dolor sit...
vue+Element实现搜索关键字高亮功能
10-16
主要为大家详细介绍了vue+Element实现搜索关键字高亮功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android tabLayout+recyclerView实现锚点定位的示例
01-05
在上一篇文章Android 实现锚点定位中，我们介绍了tablayout+scrollView实现的锚点定位，今天我们使用tablayout+recyclerView 来实现同样的效果。  效果图： 实现思路 实现的思路与上一篇文章是一致的：  1、...
前端-搜索高亮、字体放大及锚点定位功能
04-13
在前端开发中，实现搜索高亮、字体放大和锚点定位功能是提升用户体验的重要手段。以下将详细讲解这些功能的实现方法，以及如何在nuxt.js框架和elementUI组件库中进行应用。 首先，让我们来看搜索高亮。搜索高亮是在...
详解Vue项目中实现锚点定位
10-17
主要介绍了Vue项目中实现锚点定位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
html忽略标签关键字标记
行善之人必有余庆
05-11 955
忽视HTML标签标记 一年之计，莫如树谷，十年之计，莫如树木，百年之计，莫如树人 效果：
html 忽略标签属性,限制文本一定数目的字符忽略HTML标签/属性
weixin_35757736的博客
06-04 247
地带的所有的HTML从与正则表达式的字符串标签和然后子串var new_string = text_string.replace(/]*>/g, "").substring(0,100);[UPDATE]我读到的保留的HTML代码，唯一的解决办法我认为是这样的：var regx = new RegExp(/(]*>)/g);var counter = 0;//convert the s...
什么语言能替代HTML,替代HTML的下一代WEB标记语言XHTML
weixin_40002692的博客
05-30 594
最近开始逐渐在开发Web项目中使用更加规范的XHTML来替换html，收集整理了一些XHTML的资料和大家分享。通过使用XHTML开发的web项目，您可以通过访问 http://validator.w3.org/ 来对您的页面进行验证，看是否满足W3C对XHTML规范的要求。我的这个BLOG使用了国外的WordPress，它就是基于XHTML标准来编写的，不过由于我后来增加了不少别人或者自己写的插...
模糊搜索时忽略html标签内容解决方案
CelineT的博客
02-18 708
模糊搜索时忽略html标签内容解决方案 mysql过滤html标签
最新版谷歌浏览器的锚点小问题 用jquery做出ctrl+f的搜索效果
阿信随笔的博客
09-30 4612
更新谷歌浏览器的锚点小bug 因为开发需要，用锚点做了一个搜索定位效果，但是谷歌浏览器更新以后出现小问题。点击点击第一个a标签就跳到第二个所在位置，但是更新谷歌浏览器中遇到的问题是，设置锚点所在的第二个a标签一定要有内容，且不能设置为隐藏。希望遇到这个问题并解决了的小伙伴不吝賜教，没有遇到的就避开这个。  用jquery做出ctrl+f的搜索效果   后面这个分享的是， 用jquery做
html请求与响应原理,TP6实现原理分析系列(二)：请求与响应
weixin_39887748的博客
06-03 440
TP6实现原理分析系列(二)：请求与响应2020-09-14 06:57:45 讲在前面的话：请求与响应是框架生命周期中两个重要的环节，是框架的收尾两端。请求负责接管客户端请求信息，并对外提供大量接口，获取更精细化数据。响应负责将业务逻辑执行后的结果以各种形式输出。本章节将从九个方面详细介绍请求与响应的实现细节，九小节分别是：请求信息、请求变量、请求类型、头信息、请求缓存、响应类型、响应输出、响应...
过滤所有html标签的几种方法
热门推荐
码农札记
12-29 1万+
//用正则过滤html标签 $html_body ="www.111cn.net"; preg_replace("/(]*>)/e", "'\1'.strtoupper('\2').'\3'", $html_body); //用php教程自带函数strip_tags echo strip_tags("hello world!www.111cn.net"); //用户自定义
tp6 解决变量赋值html不解析
weixin_43652106的博客
10-11 822
记录：tp6 解决变量赋值html不解析问题 html代码： <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">分组</label> <div class="layui-input-inline"> <select name="departmentid" lay-filter="aihao">
tp6 路由的常用操作
qq_50909707的博客
01-02 2967
目录 1、路由基本配置位置 2、单条路由的常用操作 3、分组路由的常用操作 4、页面不存在时的操作miss 1、路由的基本配置位置 路由使用默认是开启的，也可将其关闭，对应开关在config/app.php下的如同所示的地方： 另外路由的基础配置在config/route.php里也可修改配置。 路由的写入文件为route/app.php文件。 2、单条路由的常用操作 开启测试前先规划一下根域名,打开cmd，找到对应目录，输入php think run:此时根域名为http://lo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值