javascript - 带有按类别标记/突出显示的关键字的文本段落

Question

我想在react js中实现下图功能。如何实现这一目标，请帮忙。我有一个不同类别的不同单词的列表，例如组织、人员、位置。我想将那些表示不同颜色的单词和该类别分开。

我完成了下面的代码，但没有达到我想要的效果。

<text style={{background:"#A6E22D", borderRadius: "5px", color:'#1E1935'}}> By signing up, you agree to Terms of Service and </text><br/>

Answer 1

您可以通过将文本分成与关键字匹配和不匹配的文本 block 来实现所描述的功能，而不是将匹配 block 呈现为 <span>相应标记(样式)的节点:

const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')

const srcText = `Amazon and Facebook are encouraging their employees in Seattle to stay home after workers for each company tested positive for the novel coronavirus.
Amazon (AMZN) revealed earlier this week that one of its Seattle-based employees has been diagnosed with the virus. On Wednesday, Facebook said a contractor who works at one of its offices in Seattle had tested positive.`

const sampleKeywords = [
  {word: 'Amazon', tag: 'ORG'},
  {word: 'Facebook', tag: 'ORG'},
  {word: 'Seattle', tag: 'GEO'},
  {word: 'earlier this week', tag: 'TIME'},
  {word: 'on Wednesday', tag: 'TIME'}
]

const TaggedText = ({text, keywords}) => {
  const rawKeywords = keywords.map(({word}) => word),
        markedText = text.replace(new RegExp(rawKeywords.join('|'), 'gi'), w => `|${w}|`),
        textBlocks = markedText.split('|').filter(textBlock => textBlock.length != 0)
  return (
    <span style={{lineHeight:'160%'}}>
      {
        textBlocks.map((textBlock,key) => {
          const tag = (keywords.find(({word}) => word.toLowerCase() == textBlock.toLowerCase()) || {tag: null}).tag
          return <span {...{key,...(tag && {tag})}}>{textBlock}{tag && <span className="tagLabel">{tag}</span>}</span>
        })
      }
    </span>
  )
}

render(<TaggedText text={srcText} keywords={sampleKeywords} />, rootNode)

span.tagLabel {
  background: #fff;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  margin-left: 10px;
  color: grey;
}

span[tag="ORG"] {
  background: #bf405c;
  padding: 2px 10px;
  border-radius: 5px;
  color: #fff;
  white-space: nowrap;
}

span[tag="GEO"] {
  background: #3a8a2e;
  padding: 2px 10px;
  border-radius: 5px;
  color: #fff;
  white-space: nowrap;
}

span[tag="TIME"] {
  background: #822e8a;
  padding: 2px 10px;
  border-radius: 5px;
  color: #fff;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>