React Native中按HTML标签拆分字符串实现文本解析问题排查

问题根源 #

1. HTML转义未解码：输入中的<和>是HTML实体，直接用正则无法匹配，必须先解码为<和>。
2. 正则分组与拆分逻辑混乱：带捕获分组的正则split会将分组内容也拆分为数组元素，导致后续处理时标签和文本混杂。
3. 分组索引错误：正则表达式的分组索引使用错误，导致标签名提取错误，进而出现ie/i这类乱码。
4. 闭合标签处理逻辑缺失：直接忽略闭合标签，没有维护标签嵌套层级，无法正确结束对应样式的组件。

修复后的完整代码 #

import { Text } from "react-native";
import React from "react";

/**
 * @typedef TextMarkupProps
 * @type {object}
 * @property {string|null|undefined} text - 带迷你标记的文本（支持HTML转义格式）
 * @property {object|null|undefined} style? - 全局文本样式
 */
export default React.memo((/** @type {TextMarkupProps} */ props) => {
  const { text: markup, style: baseStyle } = props;
  if (!markup) return <Text style={baseStyle} />;

  // 解码HTML实体，将&lt;/&gt;转为</>
  const decodedText = decodeURIComponent(
    markup.replace(/&lt;/g, "%3C").replace(/&gt;/g, "%3E").replace(/&amp;/g, "%26")
  );

  const tagConfig = {
    b: { style: { fontWeight: "bold", backgroundColor: "black" } },
    i: { style: { fontStyle: "italic" } },
    u: { style: { textDecorationLine: "underline" } },
  };

  // 匹配所有标签和纯文本片段的正则
  const segmentPattern = /(<(\/)?(b|i|u)>)|([^<>]+)/g;
  const segments = decodedText.match(segmentPattern) || [];

  // 用栈管理标签层级，构建嵌套的Text组件
  const textElements = [];
  const styleStack = [];

  segments.forEach((segment, index) => {
    const tagMatch = segment.match(/<(\/)?(b|i|u)>/);
    if (tagMatch) {
      const isClosing = tagMatch[1] === "/";
      const tagName = tagMatch[2];

      if (isClosing) {
        // 闭合标签：弹出栈顶样式
        styleStack.pop();
      } else {
        // 开启标签：将对应样式压入栈
        styleStack.push(tagConfig[tagName]);
      }
    } else {
      // 文本片段：合并全局样式与当前激活的标签样式
      let currentStyle = baseStyle;
      if (styleStack.length > 0) {
        currentStyle = styleStack.reduce((merged, styleObj) => ({
          ...merged,
          ...styleObj.style,
        }), { ...baseStyle });
      }
      textElements.push(
        <Text key={index} style={currentStyle}>
          {segment}
        </Text>
      );
    }
  });

  return <Text style={baseStyle}>{textElements}</Text>;
});

核心修复点说明 #

• HTML解码：通过替换转义字符为URI编码，再用decodeURIComponent解码，确保<和>能被正则正确识别。
• 分段正则：/(<(\/)?(b|i|u)>)|([^<>]+)/g会匹配所有标签或纯文本片段，避免split带来的分组混乱。
• 样式栈：使用栈结构维护当前激活的标签样式，遇到开启标签压入样式，闭合标签弹出，确保文本片段应用正确的嵌套样式。
• 样式合并：将全局样式与当前栈中的标签样式合并，保证React Native Text组件的样式继承逻辑正确。

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