React中如何筛选句子中的指定词汇并将其加粗显示？

方案1：无XSS风险的JSX原生实现（推荐） #

这种方案不需要操作HTML字符串，完全用JSX渲染，可避免注入风险：
首先封装通用的关键词加粗处理函数：

// 定义需要加粗的词汇
const tags = ["Welcome", "Audience"];

// 处理文本，把匹配到的关键词转为加粗元素
const formatTextWithBoldTags = (text, tags) => {
  // 转义标签里的正则特殊字符，避免正则解析报错
  const escapedTags = tags.map(tag => tag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
  // 生成匹配正则，参数i代表忽略大小写，不需要严格大小写匹配可删除
  const regex = new RegExp(`(${escapedTags.join('|')})`, 'gi');
  // 按关键词拆分文本
  const parts = text.split(regex);
  
  return parts.map((part, idx) => {
    // 匹配到关键词则返回加粗元素
    if (tags.some(tag => tag.toLowerCase() === part.toLowerCase())) {
      return <span key={idx} style={{fontWeight: 'bold'}}>{part}</span>
    }
    // 普通文本直接返回
    return part;
  })
}

修改你的Paragraph组件：

function Paragraph({ text, size }) {
  return <span>{formatTextWithBoldTags(text, tags)}</span>;
}

最后遍历你的Data数组渲染即可：

// 页面渲染逻辑
{Data.map(item => (
  <div key={item.index} className={item.layout}>
    <h2>{item.title}</h2>
    {item.content.map((contentItem, idx) => {
      if (contentItem.type === 'paragraph') {
        return <Paragraph key={idx} text={contentItem.text} />
      }
      // 其他content类型可在此处扩展处理
      return null
    })}
    <img src={item.image} width={item.width} alt={item.title} />
  </div>
))}

如果需要严格匹配大小写，只需删除正则参数里的i，同时移除关键词匹配判断里的toLowerCase()方法即可。

方案2：dangerouslySetInnerHTML实现（仅内容可控时使用） #

如果你的文本内容完全是内部可控的，不存在用户输入的不可信内容，可以用这个更简洁的实现：

const tags = ["Welcome", "Audience"];
const escapedTags = tags.map(tag => tag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
// 同样不需要大小写匹配可删除参数i
const matchRegex = new RegExp(`(${escapedTags.join('|')})`, 'gi');

function Paragraph({ text, size }) {
  const formatted = text.replace(matchRegex, (match) => `<b>${match}</b>`);
  return <span dangerouslySetInnerHTML={{ __html: formatted }}></span>;
}

后续Data渲染逻辑和方案1一致即可。

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