如何使用JavaScript将HTML字符串转换为WhatsApp消息格式

需求说明 #

将包含<b>、<i>、带行内样式的<strike>以及 的HTML字符串，转换为WhatsApp官方推荐的富文本标记格式：

• 粗体：用*包裹
• 斜体：用_包裹
• 删除线：用~包裹
• 处理嵌套样式（如<i><b>...</b></i>、带粗斜体样式的<strike>）
• 替换 为普通空格，清理冗余格式

实现代码 #

function htmlToWhatsApp(html) {
    // 创建临时DOM元素解析HTML结构
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;

    // 递归处理DOM节点，生成对应标记
    function processNode(node) {
        if (node.nodeType === Node.TEXT_NODE) {
            // 替换非断空格为普通空格，移除多余引号
            return node.textContent.replace(/ /g, ' ').replace(/"/g, '');
        }

        // 处理子节点内容
        const content = Array.from(node.childNodes).map(processNode).join('');
        const tag = node.tagName.toLowerCase();

        // 根据标签和样式生成WhatsApp格式
        switch (tag) {
            case 'b':
                return `*${content}*`;
            case 'i':
                return `_${content}_`;
            case 'strike':
                let strikeContent = `~${content}~`;
                const styleAttr = node.getAttribute('style') || '';
                // 处理strike标签内的粗体、斜体样式
                if (styleAttr.includes('font-weight: bold')) {
                    strikeContent = `*${strikeContent}*`;
                }
                if (styleAttr.includes('font-style: italic')) {
                    strikeContent = `_${strikeContent}_`;
                }
                return strikeContent;
            default:
                return content;
        }
    }

    // 生成结果并清理多余空格
    return processNode(tempDiv).replace(/\s+/g, ' ').trim();
}

// 测试示例
const htmlText = '<b>TEST </b> BODY <i><b>WITH </b></i>SAMPLE <strike style="font-weight: bold; font-style: italic;">FORMAT&nbsp;</strike>&nbsp; &nbsp; HERE"';
console.log(htmlToWhatsApp(htmlText));
// 输出结果：*TEST* BODY _*WITH *_ SAMPLE *_~FORMAT~_* HERE

关键逻辑说明 #

1. DOM解析：利用浏览器原生DOM API解析HTML，避免手动正则匹配标签的兼容性问题
2. 递归处理节点：遍历所有子节点，确保嵌套标签（如<i>包裹<b>）能正确生成嵌套标记
3. 样式映射：
   • 直接标签（<b>/<i>）对应基础标记
   • <strike>标签额外解析行内样式，叠加粗体/斜体标记
4. 格式清理：统一替换 为普通空格，合并连续空格，移除多余引号

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