使用 $('body').text() 时如何在元素之间添加空格？

Question

例如，如果我创建一个包含以下内容的页面：

<body>
<p>
ABC DEF<p>GHI</p>
JKL<br>MNO
</p>
</body>

然后我进入浏览器：

ABC DEF

GHI

JKL
MNO

但是当我现在使用$('body').text() 时，我又回来了：

ABC DEFGHI
JKLMNO

是否可以在元素之间添加空格？所以“DEFGHI”和“JKLMNO”实际上是两个词而不是一个词？

这里是jsfiddle 示例的链接。

Answer 1

使用html() 代替text()，然后用空格替换br 和p 标签。

var text = $('body').html();
var str = text.replace( /<br\s*[\/]?>/gi, '\r\n'); // <br> to newline
var str2 = str.replace(/<\/?p[^>]*>/g, '\r\n'); // <p> to newline
var str3 = str2.replace(/  +/g, ' '); // multiple spaces to one

console.log(str3)

产生的结构与 HTML 完全相同，但在文本中

ABC DEF

GHI

JKL
MNO

如果你将替换为空白空间 ' ' 而不是 '\r\n' 你会得到：

ABC DEF GHI 
JKL MNO

• 这是第一个的working example。
• 这是第二个的working example。