React中使用%VARIABLE%语法做字符串替换时如何添加格式化样式

你原来的写法返回的是纯字符串，直接在替换结果里加HTML标签的话，React为了防范XSS攻击会默认对HTML内容做转义，导致标签直接以文本形式展示，不会生效。可以用以下两种方式实现需求：

方案1：使用dangerouslySetInnerHTML（适合内容完全可控的场景） #

如果你的原始模板和替换变量都没有不可信的用户输入，可以直接拼接HTML标签后通过这个API渲染：

// 替换时直接拼接strong标签
const rawHtml = 'This is %FIRST%, this is %SECOND%, and this is %THIRD%.'
  .replace(/%\w+%/g, (variable) => {
    const replaceMap = {
      '%THIRD%': 'a pear',
      '%FIRST%': 'an apple',
      '%SECOND%': 'a banana',
    }
    const value = replaceMap[variable] || variable
    return `<strong>${value}</strong>`
  })

// 组件中使用
function MyComponent() {
  return <p dangerouslySetInnerHTML={{ __html: rawHtml }} />
}

注意：该方案仅可用于所有内容（原始模板、替换变量）均为可控的内部内容的场景，若存在用户输入的不可信内容会有XSS安全风险。

方案2：处理为React节点数组（更安全，推荐） #

不需要使用危险API，符合React的渲染逻辑，避免XSS风险：

function FormattedText() {
  const originalText = 'This is %FIRST%, this is %SECOND%, and this is %THIRD%.'
  const replaceMap = {
    '%THIRD%': 'a pear',
    '%FIRST%': 'an apple',
    '%SECOND%': 'a banana',
  }
  // 按占位符分割字符串，同时保留占位符本身
  const textParts = originalText.split(/(%\w+%)/g)

  return (
    <p>
      {textParts.map((part, index) => {
        // 匹配到占位符就返回加粗的替换内容
        if (replaceMap[part]) {
          return <strong key={index}>{replaceMap[part]}</strong>
        }
        // 普通文本直接返回
        return part
      })}
    </p>
  )
}

内容的提问来源于stack exchange，提问作者Oystein