怎么把一个由wangeditor编辑过的内容里面的所有标签都去掉？

Question

如下面的是一个wangeditor里生成的文本，我想只要里面的文本内容，需要换行的用<br/>替换，这个怎么做到？

<div style="width: 100px; white-space: nowrap; text-overflow: ellipsis;"><p><span style="color: rgb(32, 47, 82); background-color: rgb(255, 255, 255); font-size: 12px; font-family: 宋体;">病理诊断的内容333病理诊断理诊断的内容333病理</span></p><p><span style="color: rgb(32, 47, 82); background-color: rgb(255, 255, 255); font-size: 12px; font-family: 宋体;">诊断的内容333病理诊断的内容333</span></p></div>

上面的去掉标签应该是：
`病理诊断的内容333病理诊断理诊断的内容333病理
诊断的内容333病理诊断的内容333
`

Answer 1

editor.getText()默认就是换行的
https://www.wangeditor.com/v5/content.html#%E8%8E%B7%E5%8F%96...

Answer 2

function stripHtmlAndAddBr(html) {
    // 创建一个临时的DOM元素来解析HTML
    var tempDiv = document.createElement("div");
    tempDiv.innerHTML = html;
    
    // 获取纯文本内容并分割成数组，每个段落作为一个元素
    var paragraphs = tempDiv.textContent.split(/\n+/);
    
    // 为每个段落追加 <br/> 标签
    var result = paragraphs.map(paragraph => paragraph + '<br/>').join('');
    
    return result;
}

var htmlString = `<div style="width: 100px; white-space: nowrap; text-overflow: ellipsis;"><p><span style="color: rgb(32, 47, 82); background-color: rgb(255, 255, 255); font-size: 12px; font-family: 宋体;">病理诊断的内容333病理诊断理诊断的内容333病理</span></p><p><span style="color: rgb(32, 47, 82); background-color: rgb(255, 255, 255); font-size: 12px; font-family: 宋体;">诊断的内容333病理诊断的内容333</span></p></div>`;

var result = stripHtmlAndAddBr(htmlString);
console.log(result);

输出结果：
病理诊断的内容333病理诊断理诊断的内容333病理<br/>
诊断的内容333病理诊断的内容333<br/>

Answer 3

wangEditor 应该有获得text的方法吧。

getText() 应该可以满足

Answer 4

为了去掉HTML标签并保留换行，你可以使用JavaScript的DOM解析方法或者正则表达式，但在这个特定情况下，考虑到你可能需要保留<br>标签作为换行符，并且<p>标签之间应该也视为换行，使用DOM解析方法可能更合适。不过，由于你的问题中特别指出需要替换换行（即将多个段落视为换行），我们可以将<p>标签视为换行符（<br/>），并去除其他所有标签。

以下是一个使用JavaScript实现的示例，该示例将HTML字符串转换为纯文本，其中<p>标签被替换为<br/>，其他所有HTML标签被去除：

function stripHtmlTagsAndReplaceParagraphs(html) {
    // 创建一个新的div元素作为容器
    const tempDiv = document.createElement('div');
    // 设置innerHTML为HTML字符串，这样DOM会解析HTML并创建相应的DOM节点
    tempDiv.innerHTML = html.replace(/<p>/g, '<br/>').replace(/<\/p>/g, '');
    // 使用textContent来获取纯文本内容，这会忽略所有HTML标签
    let text = tempDiv.textContent || tempDiv.innerText || "";
    // 将连续的空格替换为单个空格（可选，根据需要处理）
    text = text.replace(/\s+/g, ' ');
    // 如果需要，可以进一步处理文本，比如替换<br/>为换行符（在显示时，<br/>通常会被浏览器解释为换行）
    // 但在这个上下文中，我们保留<br/>以符合你的需求
    return text;
}

// 示例HTML字符串
const htmlString = `<div style="width: 100px; white-space: nowrap; text-overflow: ellipsis;"><p><span style="color: rgb(32, 47, 82); background-color: rgb(255, 255, 255); font-size: 12px; font-family: 宋体;">病理诊断的内容333病理诊断理诊断的内容333病理</span></p><p><span style="color: rgb(32, 47, 82); background-color: rgb(255, 255, 255); font-size: 12px; font-family: 宋体;">诊断的内容333病理诊断的内容333</span></p></div>`;

// 调用函数并打印结果
console.log(stripHtmlTagsAndReplaceParagraphs(htmlString));
// 注意：这个输出在控制台中可能看起来像是连续的文本，但在HTML中<br/>会被解释为换行

注意：

• 这个函数首先将所有<p>标签替换为<br/>，然后再去除其他所有HTML标签。这意味着<p>标签内的文本将直接跟随在<br/>之后，符合你的需求。
• textContent属性用于获取元素的纯文本内容，不包括任何HTML或XML标记。
• 如果你的环境不是浏览器（比如Node.js），你可能需要使用像jsdom这样的库来模拟DOM环境。
• 在某些情况下，如果你希望<br/>在HTML输出中显示为实际的换行（而不是仅仅在浏览器渲染时），你可能需要在输出时进一步处理字符串，将<br/>替换为HTML中的换行符（如\n），但这通常取决于你的具体需求和使用场景。