使用十行 React 代码实现一个关键字高亮组件

最近遇到了一个小问题：

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

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

使用 js 实现高亮函数#

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

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

使用 mark 标签！

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

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

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

在 React 中实现高亮函数#

1
function Highlight ({ string, words }) {
2
  const reg = new RegExp(words.join('|'), 'g')
3
  const token = string.replace(reg, '#@$&#')
4
  const elements = token.split('#').map(x => (
5
    x[0] === '@' ? React.createElement('mark', {
6
      classname: 'highlight'
7
    }, x.slice(1)) : x
8
  ))
9
  return React.createElement('div', null, ...elements)
10
}

使用 js 实现高亮函数#

在 React 中实现高亮函数#

相关阅读