ReactJS替换含kk-id属性的HTML标签为锚标签的高效实现问询

我在MongoDB中存储了原始HTML内容，这些HTML里用自定义的kk-id属性标记特定对象，需要把带有该属性的标签替换成锚标签。已经用原生JavaScript实现了功能，想知道有没有更高效的React实现方式。

数据示例：

<p>Hello <span kk-id="123">John Doe</span></p>

其中John Doe对应的ID为123。

现有React组件代码：

import React, { useEffect, useState } from "react";

export default function TestComponent() {
  const [html, setHtml] = useState(
    `<p>Hello <span kk-id="123">John Doe</span><br /></p>`
  );

  useEffect(() => {
    const span = document.querySelector(`[kk-id]`);
    if (span) {
      const a = document.createElement("a");
      a.href = "/people/john-doe";
      a.innerText = span.innerText;
      span.parentNode.replaceChild(a, span);
    }
  }, [html]);

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

方法1：预处理HTML字符串（适合简单场景） #

直接在渲染前对HTML字符串做正则替换，避免DOM操作，更贴合React的声明式渲染逻辑。这种方式性能最优，适合结构不复杂的HTML。

import React from "react";

export default function TestComponent() {
  const rawHtml = `<p>Hello <span kk-id="123">John Doe</span><br /></p>`;
  
  // 定义ID与跳转地址的映射
  const idToHref = {
    "123": "/people/john-doe"
  };

  // 正则匹配带kk-id的标签并替换为锚标签
  const processedHtml = rawHtml.replace(
    /<(\w+) kk-id="(\d+)">([^<]+)<\/\1>/g,
    (_, tag, id, text) => {
      const href = idToHref[id] || "/#";
      return `<a href="${href}">${text}</a>`;
    }
  );

  return <div dangerouslySetInnerHTML={{ __html: processedHtml }} />;
}

方法2：解析HTML为React元素（适合复杂场景） #

如果HTML结构复杂（比如嵌套标签、多属性），正则容易失效，可以用DOMParser解析HTML，遍历节点后转换成React元素，精准处理每个带kk-id的标签。这种方式完全脱离DOM操作，符合React的组件化思想。

import React, { useMemo } from "react";

// 递归遍历DOM节点，转换为React元素
function convertHtmlToReact(htmlString) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, "text/html");

  const traverse = (node) => {
    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      return node.textContent;
    }

    // 提取元素属性
    const attrs = {};
    Array.from(node.attributes).forEach(attr => {
      attrs[attr.name] = attr.value;
    });

    // 替换带kk-id的标签为锚标签
    if (attrs["kk-id"]) {
      const id = attrs["kk-id"];
      const href = `/people/${id === "123" ? "john-doe" : "unknown"}`;
      // 递归处理子节点
      const children = Array.from(node.childNodes).map(traverse);
      return <a key={id} href={href}>{children}</a>;
    }

    // 其他标签正常转换
    const tag = node.tagName.toLowerCase();
    const children = Array.from(node.childNodes).map((child, idx) => 
      React.cloneElement(traverse(child), { key: idx })
    );
    return React.createElement(tag, attrs, children);
  };

  return traverse(doc.body.firstChild);
}

export default function TestComponent() {
  const rawHtml = `<p>Hello <span kk-id="123">John Doe</span><br /></p>`;
  // 用useMemo缓存转换结果，避免重复计算
  const reactContent = useMemo(() => convertHtmlToReact(rawHtml), [rawHtml]);

  return <div>{reactContent}</div>;
}

方法3：优化原有DOM操作方案 #

如果必须保留DOM操作的思路，可以用React的useRef定位容器，避免全局DOM查找，提升精准度和性能：

import React, { useEffect, useState, useRef } from "react";

export default function TestComponent() {
  const [html, setHtml] = useState(
    `<p>Hello <span kk-id="123">John Doe</span><br /></p>`
  );
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;
    // 只在当前容器内查找带kk-id的元素
    const elements = containerRef.current.querySelectorAll(`[kk-id]`);
    elements.forEach(el => {
      const a = document.createElement("a");
      a.href = "/people/john-doe";
      a.textContent = el.textContent;
      el.parentNode.replaceChild(a, el);
    });
  }, [html]);

  return <div ref={containerRef} dangerouslySetInnerHTML={{ __html: html }} />;
}

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