阿里云优惠活动,点击链接进行购买: 邀请你一起购买云服务器~~
你可以跟着我的笔记 当我有一台服务器时,我做了什么 来开始维护服务器并搭建应用。

最近遇到了一个小问题:

一串长文本,一个关键词数组,对长文本中的关键词进行高亮。

最后实现效果如下: https://shici.xiange.tech/poems/l0c0leh93v8

# 使用 js 实现高亮函数

取巧一点方法,可以对长文本中的关键字进行替换,使之包装在一个标签下,为标签添加高亮样式。

为了更好地语义化,对关键词高亮应该使用什么 html 标签呢?

使用 mark 标签!

关于 mark 标签更多内容参考: https://www.w3schools.com/TAgs/tag_mark.asp

function highlight (string, words) {
  if (!words.length) {
    return string
  }
  const reg = new RegExp(words.join('|'), 'g')
  return string.replace(reg, '<mark class="highlight">$&</mark>')
}

// <mark class="highlight">松风<mark>吹解带,<mark class="highlight">山月<mark>照弹琴。
highlight('松风吹解带,山月照弹琴。', ['山月', '松风'])

# 在 React 中实现高亮函数

function Highlight ({ string, words }) {
  const reg = new RegExp(words.join('|'), 'g')
  const token = string.replace(reg, '#@$&#')
  const elements = token.split('#').map(x => (
    x[0] === '@' ? React.createElement('mark', {
      classname: 'highlight'
    }, x.slice(1)) : x
  ))
  return React.createElement('div', null, ...elements)
}
Last Updated: 10/25/2019, 5:43:00 AM