如何从HTML节点提取文本并使用JavaScript保持正确的空格格式

Question

我需要获取div内部的文本值。你可以把它想象成一个文本区域，在那里你可以这样做：

let inputArea = document.getElementById("text-area");
let text = inputArea.value;
text
// Expected result:
// Hello
//
// Hello
//
// Hello
//
// Hello

不幸的是，我没有一个文本区域，我不能这样做。我做了什么：

(1) 获取需要提取文本的HTML节点(var bodyHtml..)

(2) 将HTML节点转换为字符串(调用extractStringFromNode()..)

(3) 从返回的字符串中提取字符串(调用extractContentFromString()..)

我的问题是我丢失了"文本格式"。let text(上面的代码)包含具有正确格式的inputArea的值。当我试图使用我的实现(下面的代码)来复制它时，我失去了这一点。

解决这个问题的正确方法是什么？

---

var OriginalText;
function parseText(event) {
// get text
var bodyHtml = event.composeView.getBodyElement();
var stringBodyHtml = extractStringFromNode(bodyHtml);
console.log(stringBodyHtml)
var text = extractContentFromString(stringBodyHtml);
OriginalText = text;
console.log(text);
// now parse it 
format(text);
}

// extract text from html
function extractContentFromString(s) {
var span = document.createElement('span');
span.innerHTML = s;
return span.textContent || span.innerText;
};
// from html node to string
function extractStringFromNode ( node ) {
var tmpNode = document.createElement( "div" );
tmpNode.appendChild( node.cloneNode( true ) );
var str = tmpNode.innerHTML;
tmpNode = node = null; // prevent memory leaks in IE
return str;
}
// Expected result: HelloHelloHelloHello

Answer 1

使用CSS属性white-space并将其设置为pre。这将保留换行符，但是，必须将其放置在希望具有类似间距的文本的每个位置。

let div = document.querySelector("div"); 
//this div has CSS styling white-space: pre
span = document.body.appendChild( document.createElement("span") );
//this span does not
span.textContent = div.textContent;
//div will be "formatted" with line breaks. Span will not.

div { 
white-space: pre;
}

<div>This
Is
A
Demo
</div>
<hr/>