极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

最近遇到了一个小问题:

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

最后实现效果如下: https://shici.xiange.tech/poems/l0c0leh93v8 (opens new window)

# 使用 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)
}

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 5/19/2021, 11:49:20 AM