如何在JSX环境中渲染带属性的HTML标签字符串并高亮各部分？

你原来的方法是把转义后的HTML字符串直接渲染成纯文本，只能完整显示标签内容，但没法给<ifx-icon>、icon这些不同语义的部分设置颜色。要实现语法高亮，核心是把标签拆成不同的语义片段，分别为每个片段添加样式。下面提供两种可行思路：

思路一：手动解析标签拆分渲染 #

适合简单HTML标签场景，能完全自定义每个部分的样式：

1. 先把转义的字符串还原成原始HTML格式
2. 用正则表达式把标签拆成「标签符号/名称」「属性名」「属性值」等不同片段
3. 给每个片段套上带颜色样式的<span>，最后在JSX里渲染这些片段组成的数组

代码示例 #

function HtmlHighlighter({ escapedHtml }) {
  // 还原转义的HTML字符串
  const rawHtml = escapedHtml.replace(/&lt;/g, '<').replace(/&quot;/g, '"');

  // 解析标签并生成带样式的元素数组
  function parseToHighlightedElements(html) {
    const elements = [];
    // 正则匹配标签的各个组成部分
    const tagPattern = /(<\/?[a-z-]+)|(\s+[a-z-]+=)|(["'][^"']+["'])|(>)/gi;
    let lastPos = 0;
    let matchResult;

    while ((matchResult = tagPattern.exec(html)) !== null) {
      // 加入匹配间隔的文本（如果存在）
      if (matchResult.index > lastPos) {
        elements.push(html.slice(lastPos, matchResult.index));
      }

      const [text, tagPart, attrNamePart, attrValuePart, closePart] = matchResult;
      // 根据片段类型设置对应颜色
      if (tagPart) {
        elements.push(<span key={elements.length} style={{ color: '#268bd2' }}>{text}</span>);
      } else if (attrNamePart) {
        elements.push(<span key={elements.length} style={{ color: '#859900' }}>{text}</span>);
      } else if (attrValuePart) {
        elements.push(<span key={elements.length} style={{ color: '#dc322f' }}>{text}</span>);
      } else if (closePart) {
        elements.push(<span key={elements.length} style={{ color: '#657b83' }}>{text}</span>);
      }

      lastPos = tagPattern.lastIndex;
    }

    // 加入剩余的文本内容
    if (lastPos < html.length) {
      elements.push(html.slice(lastPos));
    }
    return elements;
  }

  const highlightedElements = parseToHighlightedElements(rawHtml);
  // 用等宽字体更贴合代码高亮的视觉效果
  return <div style={{ fontFamily: 'Consolas, monospace' }}>{highlightedElements}</div>;
}

// 使用组件
function App() {
  const htmlTag = '&lt;ifx-icon icon=&quot;calendar-16&quot;&gt;&lt;/ifx-icon&gt;';
  return <HtmlHighlighter escapedHtml={htmlTag} />;
}

思路二：用现成的语法高亮库 #

如果要处理复杂HTML或者不想自己写解析逻辑，直接用成熟的高亮库更省心，比如react-syntax-highlighter：

代码示例 #

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
// 可选的高亮样式主题，这里选用tomorrow主题
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';

function App() {
  const htmlTag = '<ifx-icon icon="calendar-16"></ifx-icon>';
  const rawHtml = htmlTag.replace(/&lt;/g, '<').replace(/&quot;/g, '"');
  
  return (
    <SyntaxHighlighter 
      language="html" 
      style={tomorrow}
      customStyle={{ fontFamily: 'Consolas, monospace' }}
    >
      {rawHtml}
    </SyntaxHighlighter>
  );
}

这种方法不仅支持自定义标签的高亮，还能兼容各种复杂HTML语法，样式主题也可以自由切换。

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