React.js中如何实现字符串指定部分内容的加粗渲染

架构老林

2026-10-3

实现方案

核心思路

我们需要对原HTML字符串的标签做精准替换，核心逻辑如下：

先通过DOM解析器把字符串转为可操作的DOM结构，避免正则替换容易出现的嵌套标签误匹配问题
倒序遍历所有<em>标签（优先处理内层嵌套节点），仅替换**直接子节点为纯文本、且文本内容为class或physics**的<em>标签为<strong>标签
把处理后的DOM结构转回HTML字符串，在React中渲染即可

完整代码实现

import React from 'react';

function EmToStrongRenderer() {
  const originStr = 'Hello I am <em>developer</em> this is a <em>class</em> of <em><em>physics</em></em>';

  const processHtml = (str) => {
    // 解析HTML字符串为DOM对象
    const parser = new DOMParser();
    const htmlDoc = parser.parseFromString(str, 'text/html');
    // 拿到所有em节点
    const emList = htmlDoc.querySelectorAll('em');

    // 倒序遍历，优先处理内层嵌套的em节点
    for (let i = emList.length - 1; i >= 0; i--) {
      const currentEm = emList[i];
      const text = currentEm.textContent.trim();
      // 仅替换直接子节点为纯文本、且内容符合要求的em节点
      const isPureTextEm = currentEm.childNodes.length === 1 
        && currentEm.childNodes[0].nodeType === Node.TEXT_NODE;

      if (isPureTextEm && (text === 'class' || text === 'physics')) {
        const strongNode = htmlDoc.createElement('strong');
        strongNode.textContent = text;
        currentEm.parentNode.replaceChild(strongNode, currentEm);
      }
    }

    return htmlDoc.body.innerHTML;
  };

  const processedHtml = processHtml(originStr);

  // 若源字符串是可信任的，直接用dangerouslySetInnerHTML渲染即可
  return <div dangerouslySetInnerHTML={{ __html: processedHtml }} />;
}

export default EmToStrongRenderer;