如何在不删除换行符<br/>的情况下提取HTML textContent？答案

【问题标题】：How to extract HTML textContent without removing the line breaks <br/>?如何在不删除换行符<br/>的情况下提取HTML textContent？
【发布时间】：2020-08-09 16:13:02
【问题描述】：

我正在使用此函数从项目中的 Textareas 中提取文本（以避免将复制的文本样式保存在数据库中），

export const stripHTML = (text) => {
  // eslint-disable-next-line no-var
  var temporalDivElement = document.createElement("div");

  temporalDivElement.innerHTML = text;
  return temporalDivElement.textContent || temporalDivElement.innerText || "";
};

问题是现在用户不能在文本中写任何换行符。解决这个问题的最佳方法是什么，所以我得到一个干净的文本但有换行符？

【问题讨论】：

插入更多代码
"避免保存复制的文本样式"是什么意思？请提供minimal reproducible example 并提供示例输入和预期结果
您正在寻找的是否是这个答案：stackoverflow.com/questions/40417527/….
@charlietfl stackoverflow.com/questions/63153738/…
stackoverflow.com/questions/20365465/…

标签： javascript html css

【解决方案1】：

您不需要 div，只需这样做：

var textarea = document.getElementById('textarea');
var temporalDivElement = document.createElement("div");
temporalDivElement.innerHTML = textarea.value;
var tempText = temporalDivElement.textContent || temporalDivElement.innerText || "";
return tempText.replace(/\r?\n/g, '<br />');

【讨论】：

我需要 div，这样我就可以从复制的元素中删除样式.. 检查stackoverflow.com/questions/63153738/…

【解决方案2】：

我通过删除问题 stripHTML 中的函数并将此函数添加为 onPaste 侦听器来解决问题

onPaste(e) {
    e.preventDefault();
    const text = e.clipboardData.getData("text/plain");

    document.execCommand("insertText", false, text);
    return true;
}

【讨论】：