搜索关键字高亮（不区分大小写）

最新推荐文章于 2022-08-19 20:15:28 发布

原创最新推荐文章于 2022-08-19 20:15:28 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个基于关键词搜索的文章处理方法,通过axios发起请求获取带有特定关键词的文章列表,并对文章标题中包含关键词的部分进行高亮显示。当用户输入关键词后,系统会从API接口获取相关文章,然后使用正则表达式匹配标题中的关键词,并用HTML标签对匹配到的关键词进行标记以便于视觉上的突出显示。如果关键词为空,则返回空列表。此功能还包含了错误处理机制,当请求失败时会弹出提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

inputHandle () {
      if (this.keyword.length > 0) {
        axios('/api/article/getArticleByKeyword?keyword=' + this.keyword).then((response) => {
          this.titleList = response.data
          this.titleList.forEach((value) => {
            var reg = new RegExp(this.keyword, 'ig')
            var index = value.title.search(reg)
            var len = this.keyword.length
            if (index > -1) {
              var word = value.title.substring(index, index + len)
              value.title = value.title.substring(0, index) + '<span class="text-theme">' + word + '</span>' + value.title.substring(index + len, value.title.length)
            }
          })
        }).catch((err) => {
          Toast(err)
        })
      } else {
        this.titleList = []
      }
    }