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

Question

I'm using this function to extract the Text from the Textareas in my project (to avoid saving the copied text styling in the database),

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

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

The problem is that now the user can't write any line breaks in the text. What is the best way to solve that so I get a clean text but with the line breaks?

Answer 1

You don't need the div, just do this:

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 />');

Answer 2

I solved the problem by removing the function in the question stripHTML and adding this function as onPaste listener

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

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