将 HTML 格式转换为 Mobile Legends 的 BBCode 格式

Question

我目前正在为游戏 Mobile Legends 开发一款创意游戏内文字应用程序。该应用程序可以更改您在游戏中聊天时使用的文本颜色。还有其他添加，如粗体、斜体、下划线和删除线，最终输出是供您输入的代码。该应用程序旨在用户友好且易于使用。但是，我在创意方面遇到了麻烦。

网站：https://mlcolor.netlify.app/

我制作了自己的富编辑器，使用 execcommand。我需要一个将 HTML 格式（富编辑器生成）转换为 Mobile Legends 文本格式的解决方案。

Mobile Legends 格式

这与 HTML 相同。而不是<b>Hello World</b>，它使用括号[b]Hello World[/b]

这些是 Mobile Legends 中与 HTML 非常相似的格式：

粗体：[b]Hello World[/b]

斜体：[i]Hello World[/i]

下划线：[u]Hello World[/u]

罢工：[s]Hello World[/s]

foreColor: [FF0000]Hello World 它使用十六进制代码。

问题

如何转换此代码（示例输出）：

Hello World!

<b><i><u><strike>Hello World!</strike></u></i></b>

到这里：

[b][i][u][s]Hello World![/b][/i][/s]

我的解决方案

我使用了一种使用.replace(/<b>/g,'[b]') 的方法。但是，如果格式变得太复杂，则更难替换标签。代码变得复杂并且有很多属性。

复杂格式示例：

Lorem ipsum dolor 坐amet.

<span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; text-align: justify; background-color: rgb(255, 255, 255);"><span style="text-decoration: underline;"><font color="#a9fcd4"><i>Lo</i><b>rem</b></font></span> <i style="text-decoration: underline;"><font color="#0000cc">ipsu<b>m</b></font></i> <b style="text-decoration: underline;"><i><font color="#cc00cc">dolor</font></i></b> <u><font color="#cccc00">sit</font></u> <strike><font color="#cc00cc"><b>amet</b><i>.</i></font></strike></span><br>

免责声明：无论如何，我都不是专业的编码员，所以我深表歉意 对于任何业余错误。编码只是我业余时间的爱好，我 自从我玩以来，决定为 Mobile Legends 社区制作这个应用程序 游戏也是，想装饰我的简历和聊天文字。

Answer 1

您应该使用 DOM 解析器来解析输入。然后递归遍历该 DOM，并检查每个访问节点的样式以确定应指定哪些标签和颜色。以下是它的工作原理：

function parse(html) {
    let appliedColor = "000000";
    
    function parseNode(inheritedStyles, inheritedColor, node) {
        // Base case: a plain text node:
        if (node.nodeType === 3) {
            if (inheritedColor !== appliedColor && node.nodeValue.trim()) {
                appliedColor = inheritedColor;
                return `[${appliedColor}]${node.nodeValue}`;
            }
            return node.nodeValue;
        }
        // Transfer color HTML attribute to style attribute:
        if (node.nodeName === "FONT" && node.color) node.style.color = node.color;

        // Get relevant styles of this node
        let {color, textDecorationLine, fontWeight, fontStyle} = node.style;
        color = color || inheritedColor;

        // Determine U,S,B,I:
        let styles = {
            u: inheritedStyles.u || node.nodeName === "U" || textDecorationLine.includes("underline"),
            s: inheritedStyles.s || node.nodeName === "STRIKE" || textDecorationLine.includes("through"),
            b: inheritedStyles.b || node.nodeName === "B" || fontWeight.includes("bold") || +fontWeight >= 700,
            i: inheritedStyles.i || node.nodeName === "I" || fontStyle.includes("italic")
        };
        
        // Deal with color
        if (color.slice(0,4) === "rgb(") {
            color = color.match(/\d+/g).map(dec => (+dec).toString(16).padStart(2, "0")).join("").toUpperCase();
        }

        // Apply recursion to parse the child nodes
        let res = Array.from(node.childNodes, parseNode.bind(null, styles, color)).join("");

        // Wrap the content inside the necessary [] tags
        for (let prop in styles) {
            if (styles[prop] !== !!inheritedStyles[prop]) res = `[${prop}]${res}[\/${prop}]`;
        }
        return res;
    }
    
    return parseNode({}, "000000", new DOMParser().parseFromString(html, "text/html").body);
}

// Demo
let html = `<span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; text-align: justify; background-color: rgb(255, 255, 255);"><span style="text-decoration: underline;"><font color="#a9fcd4"><i>Lo<\/i><b>rem<\/b><\/font><\/span> <i style="text-decoration: underline;"><font color="#0000cc">ipsu<b>m<\/b><\/font><\/i> <b style="text-decoration: underline;"><i><font color="#cc00cc">dolor<\/font><\/i><\/b> <u><font color="#cccc00">sit<\/font><\/u> <strike><font color="#cc00cc"><b>amet<\/b><i>.<\/i><\/font><\/strike><\/span><br>`;

console.log(parse(html));