在Markdown编辑器中，如何让jQuery的.text()捕获换行符？

在contenteditable的div中，用户输入的换行会被浏览器转化为<br>标签或自动生成的<div>/<p>块级元素，而jQuery的.text()方法只会提取纯文本内容，不会将这些换行相关的元素转换为\n换行符，导致Markdown渲染时无法识别换行逻辑。

以下是两种可行的解决方法：

方法一：遍历DOM节点提取带换行的文本（推荐，兼容性好） #

通过遍历输入区的子节点，将<br>、<div>、<p>等元素转换为对应的换行符，确保完整捕获输入的换行结构：

var md = window.markdownit();

// 自定义函数：从contenteditable元素中提取带换行的文本
function getEditableText(el) {
    let text = '';
    for (const node of el.childNodes) {
        if (node.nodeType === Node.TEXT_NODE) {
            // 文本节点直接追加内容
            text += node.textContent;
        } else if (node.nodeName === 'BR') {
            // <br>转换为换行符
            text += '\n';
        } else if (['DIV', 'P'].includes(node.nodeName)) {
            // 块级元素内部内容处理后追加换行
            text += getEditableText(node) + '\n';
        } else {
            // 其他元素递归处理内部内容
            text += getEditableText(node);
        }
    }
    // 移除末尾多余的换行符
    return text.trimEnd();
}

$("#input").on("input", () => {
    const inputContent = getEditableText(document.getElementById('input'));
    $("#display").html(md.render(inputContent));
});

方法二：正则替换HTML结构（简单场景适用） #

如果你的输入场景仅包含基础换行（无复杂嵌套元素），可以直接通过正则替换HTML内容来获取带换行的文本：

var md = window.markdownit();

$("#input").on("input", () => {
    let inputHtml = $("#input").html();
    // 将<br>、<div>、<p>转换为换行符
    let inputText = inputHtml
        .replace(/<br\s*\/?>/gi, '\n')
        .replace(/<(div|p).*?>/gi, '\n')
        .replace(/<\/(div|p)>/gi, '')
        .trim();
    $("#display").html(md.render(inputText));
});

两种方法都能解决.text()丢失换行的问题，方法一更适合复杂输入场景，方法二则更简洁高效。

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