在元素之间包含空格的jQuery文本()的替代方法?

2022-04-10 00:00:00 whitespace jquery javascript html

我在容器中有一些任意的正文文本。我不能控制它,所以我不知道它的结构。但应该是这样的:

<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

问题是每个标记项之间没有空格。documentation表示:

由于不同浏览器中的HTML解析器不同,返回的文本可能在换行符和其他空格中有所不同。

我的所有搜索似乎都会弹出删除空白的结果。有没有办法拉出所有文本并保留元素之间的空间?需要在浏览器中进行,以便使用类似于Java脚本的方法。


解决方案

如果嵌套结构未知,您可以向每个元素添加空格

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(/ss+/g, ' ');
$('#new').text(str);

相关文章