在未知嵌套结构的情况下,您可以为每个元素添加空白
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 属性,它可以像那样格式化您的字符串。您可以做的是遍历树以查找文本节点并将其附加到字符串/数组。
例如:
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>
有一堆带有空格字符的文本节点。我为过滤掉它们所做的是修剪文本节点的内容,然后检查空白旁边是否有任何内容。检查出现的空白字符并过滤掉它们可能会更好。
我不确定这是否适用于任何情况。我的解决方案是使用正则表达式过滤原始 html 中的标签、空格和换行符:
$("#content-area").html().replace(/([\s\n]*<[^>]*>[\s\n]*)+/g," ")
http://jsfiddle.net/limond/mrnctqcv/1/
编辑:当然,这只有在您可以避免任何包含用户看不到的 html 的标签时才有效(例如
<script>...</script>
)
您可以利用 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);
});
我通过在 css 中添加 white-space:pre 解决了这个问题。 使用 jquery 动态添加元素时,您可以这样做:
$('<a/>')
.attr("style", 'white-space:pre;')
.text(' X ');
这对我有用。
var textWithSpaces = $('.example span').map(function() {
return $(this).text();
}).get().join(' ');
console.log(textWithSpaces);
// Output: "First Second Third"