我正在尝试写一个TextMarkup（html）解析组件，尝试按标签拆分，然后用标签替换它，我基本上结合了我读过的东西，但我认为我的正则表达式有问题。我不是在寻找第三方组件或插件。
例如，文本Liv<i>e</i> in Hous<b>e</b>keeper
返回为Livie/i in Hbo/usekeeper
我错过了什么？

import { Text } from "react-native";
    import React from "react";
    
    /**
     * @typedef TextMarkupProps
     * @type {object}
     * @property {string|null|undefined} text - a piece of mini markup text.
     * @property {object|null|undefined} style? - main text style;
     */
    export default React.memo((/** @type {TextMarkupProps} */ props) => {
      const markup = props.text;
      const style = props.style;
    
      const tagPatternMap = {
        "<b>": { style: { fontWeight: "bold", backgroundColor: "black" } },
        "<i>": { style: { fontStyle: "italic" } },
        "<u>": { style: { textDecorationLine: "underline" } },
      };
    
      const tagPattern = /(<(\/)?(b|i|u)>)/g;
      const splitText = markup.split(tagPattern);
    
      let formattedText = "";
      formattedText = splitText
        .map((text, index) => {
          if (!text) {
            return null; // Return null for empty string
          }
          const match = text.match(tagPattern);
          if (match) {
            const tag = match[2];
            const isClosingTag = match[1] === "/";
            const tagProps = tagPatternMap[`<${tag}>`];
    
            if (isClosingTag) {
              return null; // Return null for closing tags
            } else {
              return (
                // Return <Text> component with tag props and text
                <Text key={index} {...tagProps}>
                  {text.slice(match[0].length)}
                </Text>
              );
            }
          } else {
            // No tags found.
            return <Text key={index}>{text}</Text>;
          }
        })
        .filter(Boolean);
    
      return <Text style={style}>{formattedText}</Text>;
    });