IT技术 - 通过span标签动态包装js字符串，这可能会在React中危险地呈现 - 吾爱随笔录

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

IT技术 javascript html reactjs

2021-04-27 22:09:08

我有一个字符串，我想使用 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))

预期输出：

D = (C - B) / B

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

例子：

如果字符串是 A，结果应该是A。

如果字符串是 D = (C - B) / B，结果应该是 D = (C - B) / B

2个回答

你不需要dangerouslySetInnerHTML这个。

解释：

正则表达式/([a-z]+)/i匹配 1 个或多个拉丁字母的所有子字符串，不区分大小写。
String#split使用正则表达式捕获组 ( /(...)/) 在奇数索引的结果中包含捕获的文本。例如，'baba'.split(/(b)/)给你["", "b", "a", "b", "a"].

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

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)}
    </>
  )
}

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

const originalStr = `D = (C - B) / B`

function addAriaLabels(str) {
  let newStr = ''
  for (let i = 0; i < str.length; i++) {
    if (str[i].match(/[A-Z]/g) && str[i].match(/[A-Z]/g).length > 0) {
      newStr += `<span aria-label=\'column ${str[i]}\'>${str[i]}</span>`
    } else {
      newStr += str[i]
    }

  }

  return newStr;
}

console.log(addAriaLabels(originalStr))

其它你可能感兴趣的问题

上一篇react-admin 中的 showNotification 不起作用下一篇带 webusb 的指纹扫描仪