通过span标签动态包装js字符串，这可能会在React中危险地呈现

Question

我有一个字符串，我想使用 aria-label 标签将 span 标签单独添加到字母表中。 最终结果将在 React 中危险地呈现。 请指教。 这就是我所拥有的。

 const str = `D = (C - B) / B`; const addAriaLabels = (str) => { function alphaOnly(a) { var b = ''; for (var i = 0; i < a.length; i++) { if (a[i] >= 'A' && a[i] <= 'z') b += a[i]; } return b; } return alphaOnly(str).split('').map(item => `<span aria-label=\\'column ${item}\\'>${item}</span>`).join('') } console.log(addAriaLabels(str))

预期输出：

<span aria-label='column D'>D</span> = (<span aria-label='column C'>C</span> - <span aria-label='column B'>B</span>) / <span aria-label='column B'>B</span>

我不确定如何重新添加符号本身。

例子：

如果字符串是 A，结果应该是<span aria-label="column A">A</span> 。

如果字符串是 D = (C - B) / B，结果应该是<span aria-label='column D'>D</span> = (<span aria-label='column C'>C</span> - <span aria-label='column B'>B</span>) / <span aria-label='column B'>B</span>

Answer 1

为此，您不需要dangerouslySetInnerHTML的SetInnerHTML。

解释：

• 正则表达式/([az]+)/i匹配 1 个或多个拉丁字母的所有子字符串，不区分大小写。

• 带有正则表达式捕获组 ( /(...)/ ) 的String#split在奇数索引的结果中包含捕获的文本。 例如， 'baba'.split(/(b)/)给你["", "b", "a", "b", "a"] 。

  获得这些结果后，您可以将捕获的奇数索引结果 ( idx % 2 ) 映射到span元素，将偶数React.Fragment到React.Fragment s。

addAriaLabels现在返回一个 React 组件数组，可以直接在父组件中呈现。

const addAriaLabels = str =>
  str.split(/([a-z]+)/i)
    .map((substr, idx) => idx % 2
      ? <span key={idx} aria-label={`column ${substr}`}>{substr}</span>
      : <React.Fragment key={idx}>{substr}</React.Fragment>)

const Parent = () => {
  const str = `D = (C - B) / B`

  return (
    <>
      {addAriaLabels(str)}
    </>
  )
}

Answer 2

如果当前字符是字母表，则迭代字符串字符，向其添加该标签，然后将其分配给已定义的字符串，否则只需分配字符：

 const originalStr = `D = (C - B) / B` function addAriaLabels(str) { let newStr = '' for (let i = 0; i < str.length; i++) { if (str[i].match(/[AZ]/g) && str[i].match(/[AZ]/g).length > 0) { newStr += `<span aria-label=\\'column ${str[i]}\\'>${str[i]}</span>` } else { newStr += str[i] } } return newStr; } console.log(addAriaLabels(originalStr))