React中jQuery(text).find('[data-char]')的等效实现及data-id提取方法

场景1：处理HTML字符串 #

直接用浏览器原生DOMParser解析HTML，再通过querySelectorAll匹配元素，最后提取data-id即可，无需依赖jQuery：

const text = "<p><span class=\"mention\" data-index=\"1\" data-char=\"@\" data-id=\"00000000-0000-0000-0000-0000-00000000000000\" data-value=\"Jhon Doe\" data-target=\"jhon.doe@gmail.com\"><span class=\"ql-mention-char\">@</span>Jhon Doe</span> </p><p><br></p><p>azeaz </p><p>azeazea</p><p>zeaze</p>\n<span class=\"mention\" data-index=\"1\" data-char=\"@\" data-id=\"00100000-0010-0100-0100-0001-10000100000001\" data-value=\"Jhonny Tommy\" data-target=\"jhonny.tommy@gmail.com\"><span class=\"ql-mention-char\">@</span>Jhonny Tommy</span>";

// 解析HTML字符串为DOM文档
const parser = new DOMParser();
const doc = parser.parseFromString(text, 'text/html');

// 匹配所有带[data-char]属性的元素
const targetElements = doc.querySelectorAll('[data-char]');

// 提取data-id并转为数组
const dataIds = Array.from(targetElements).map(element => element.dataset.id);

console.log(dataIds);
// 输出结果：["00000000-0000-0000-0000-0000-00000000000000", "00100000-0010-0100-0100-0001-10000100000001"]

场景2：React组件内已渲染的DOM元素 #

如果HTML内容是通过dangerouslySetInnerHTML渲染到组件中的，用useRef获取容器节点后，再用原生API查找元素：

import { useRef, useEffect } from 'react';

function MentionList() {
  const containerRef = useRef(null);
  const text = "<p><span class=\"mention\" data-index=\"1\" data-char=\"@\" data-id=\"00000000-0000-0000-0000-0000-00000000000000\" data-value=\"Jhon Doe\" data-target=\"jhon.doe@gmail.com\"><span class=\"ql-mention-char\">@</span>Jhon Doe</span> </p><p><br></p><p>azeaz </p><p>azeazea</p><p>zeaze</p>\n<span class=\"mention\" data-index=\"1\" data-char=\"@\" data-id=\"00100000-0010-0100-0100-0001-10000100000001\" data-value=\"Jhonny Tommy\" data-target=\"jhonny.tommy@gmail.com\"><span class=\"ql-mention-char\">@</span>Jhonny Tommy</span>";

  useEffect(() => {
    if (containerRef.current) {
      // 组件挂载后查找目标元素
      const targetElements = containerRef.current.querySelectorAll('[data-char]');
      const dataIds = Array.from(targetElements).map(el => el.dataset.id);
      console.log(dataIds);
    }
  }, []);

  return (
    <div ref={containerRef} dangerouslySetInnerHTML={{ __html: text }} />
  );
}

export default MentionList;

注意事项 #

• 尽量避免在React项目中引入jQuery，原生DOM API完全能满足需求，还能减少项目体积、避免React数据流与jQuery DOM操作的冲突。
• 使用dangerouslySetInnerHTML时要确保HTML内容安全，防范XSS风险。

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