阿里云优惠活动,点击链接进行购买: 一年仅需89元即可以购买服务器~。我个人服务器为2核4G配置,也更加推荐购买 2核4G三年799元 配置的服务器。
你可以跟着我的笔记 当我有一台服务器时,我做了什么 来开始维护服务器并搭建应用,将引导你使用 docker 和 k8s 搭建一个自己的服务器开发集群。

最近遇到了一个小问题:

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

最后实现效果如下: 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