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 Wednesd
ay, 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 (
{
textBlocks.map((textBlock,key) => {
const tag = (keywords.find(({word}) => word.toLowerCase() == textBlock.toLowerCase()) || {tag: null}).tag
return {textBlock}{tag && {tag}}
})
}
)
}
render(, rootNode)
