我在容器中有一些任意的正文。我不控制它所以我不知道它的结构。但是这样的事情：
<div id='content-area'>
<h1>Heading</h1>
<p>A paragraph or two</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
这只是一个简单的例子，实际上它可能包含更多的项目和嵌套的东西，如表格。
我想提取所有文本并对所使用的单词进行一些处理。我正在使用以下jQuery来获取文本。
$('#content-area').text()
// HeadingA paragraph or twoitem 1item 2
问题是每个标记项目之间没有空格。该 文件 说：
由于不同浏览器中HTML解析器的变化，返回的文本可能会在换行符和其他空白区域中有所不同。
我的所有搜索似乎都取消了删除空格的结果。有没有办法拉出所有文本并在元素之间保留空间？需要在浏览器中发生这样的javascript-ish方法。
如果嵌套结构未知，您可以为每个元素添加空格
https://jsfiddle.net/3y2yLexv/1/
$( "*" ).each(function( index ) {
$( this ).append(' ');
});
var str = $('#content-area').text();
//Of course you have to trim duplicated blank spaces.
str = str.replace(/\s\s+/g, ' ');
$('#new').text(str);
我认为jQuery使用textContent属性，它可以像这样格式化你的字符串。你可以做的是遍历树，查找textNodes并将其附加到String / Array。
例如：
function getText(domElement) {
var root = domElement;
var text = [];
function traverseTree(root) {
Array.prototype.forEach.call(root.childNodes, function(child) {
if (child.nodeType === 3) {
var str = child.nodeValue.trim();
if (str.length > 0) {
text.push(str);
}
} else {
traverseTree(child);
}
});
}
traverseTree(root);
return text.join(' ');
}
var text = getText(document.getElementById('content-area'));
document.getElementById('results').innerHTML = text;<div id='content-area'>
<h1>Heading</h1>
<p>A paragraph or two</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
<pre id="results"></pre>有一堆带有空格字符的文本节点。我做了什么来过滤它们是修剪文本节点的内容，然后检查空白旁边是否有任何东西。可能最好检查出现哪个空格字符，然后将其过滤掉。
你可以使用jQuery each 收集项目的方法，并使用字符串连接包含间距。
一些粗略的例子：
$(function(){
var output = "";
$( "li" ).each( function( index, element ){
output += $(this).text() + " ";
});
$('#output').html(output);
});
通过将您想要的内容缓存到变量中，可以随意查看显示的输出，这样可以使它只写入DOM一次。
编辑：
如果您不知道结构是什么，但是您确定它们都在一个div中，您可以使用jQuery的通用选择器。
$(function(){
var output = "";
$( "#content-area *" ).each( function( index, element ){
output += $(this).text() + " ";
});
$('#output').html(output);
});
我不确定这是否适用于任何情况。我的解决方案是一个正则表达式，用于过滤原始html中的标签，空格和新行：
$("#content-area").html().replace(/([\s\n]*<[^>]*>[\s\n]*)+/g," ")
http://jsfiddle.net/limond/mrnctqcv/1/
编辑：当然，这只有在你可以避免任何包含用户看不到的html的标签时才有效（例如： <script>...</script>）
我通过添加white-space：pre来解决这个问题。 使用jquery动态添加元素时，您可以这样做：
$('<a/>')
.attr("style", 'white-space:pre;')
.text(' X ');