React Native:正确突出显示子字符串

Question

我有一个文本，我想强调它的一些部分，例如：

这是一段写得很好的文字。

这是一段写得很好的文字。

   5-8           23-31

突出显示定义为数组数组：

[[5, 8], [23, 31]]

如何将源文本(字符串(转换为可呈现的 JSX 项：

(<Text>This <Hl>is a</Hl> well-written <Hl>paragraph</Hl> of text.</Text>)

React Native 的方式？

P.S. Hl 只是一个 JSX 宏：

const Hl = (props) => <Text style={{fontWeight: 'bold'}}>{props.children}</Text>

Answer 1

创建了一个简单的函数，该函数需要文本和值数组进行转换。例如运行以下代码片段

function transform(text,arr){
  let transformObj = arr.reduce((all, item) => {
    let st = `<Hl>${text.substring(item[0], item[1] + 1)}</Hl>`
    let rl = text.substring(item[0], item[1] + 1)
    var temp = {
      [rl]: st
    }
    all.push(temp)
    return all
  }, [])
  for (let item in transformObj) {
    let key = Object.keys(transformObj[item])[0]
    let values = Object.values(transformObj[item])[0]
    text = text.replace(key, values)
  }
  return text
  
}
var text = "This is a well-written paragraph of text."
var arr = [[5, 8], [23, 31]]
var result = transform(text,arr)
console.log(result)