将 <br> 标签转换为空格的 jQuery .text() 等效方法

Question

从 jQuery 选择中获取文本很容易：

<span id="foo">hello world</span>

$('#foo').text();

你好世界

但是当jQuery选择器包含<br>标签时，它们代表换行符，也就是空格。不幸的是，.text()会将它们完全删除：

<span id="foo">hello<br>world</span>

$('#foo').text();

你好世界

如何从这样一个中提取文本，以使结果为你好世界而不是包含在其中的HTML标签？

当然，这只是一个为了说明问题而创造的微不足道的例子。一个真正的答案需要"与.text()等效"并当然可以处理任意的HTML。以下是一个稍微棘手的例子，同样是虚构的:

<div id="foo"><span class="bar"><em>hello</em><br></span>world</div>

- hippietrail

Answer 1

使用 .html() 替代 .text()

$('#foo').html();

或者使用 DOM 方法 .innerText

$('#foo')[0].innerText ;

点击查看 Fiddle

- Sushanth --

---

但是，当我从文档中提取的标记比我的示例要少得多时，我将面临HTML解析问题，不是吗？ - hippietrail

如果是这种情况，您可以使用DOM对象的innerText方法... $('#foo')[0].innerText - Sushanth --

啊哈！更加表达清晰简单了——改变我的接受度（-： - hippietrail

@hippietrail 请查看 https://dev59.com/OnM_5IYBdhLWcg3wfTI0 - Musa

抱歉 @Sushanth--，根据Musa的评论，我被迫再次取消接受 )-: 该死的Firefox - 谁能想到IE会实现比其他浏览器更有用的东西？ - hippietrail

Answer 2

正如Mims建议的那样，使用replaceWith()将<br>更改为空格，但为了不改变原始元素，使用clone()来创建元素的克隆。

var foo = $("#foo").clone();
foo.find("br").replaceWith(" ");
var text = foo.text();

演示

- Musa

---

这在 jsfiddle 上运行得很好，但是当我尝试在我的实际代码中使用时，我在 .replaceWith() 处得到了 "语法错误，无法识别的表达式：" ... 还不能理解它 ... - hippietrail

@hippietrail 你是直接从 jsfiddle 复制代码吗？如果是的话，尝试手动输入。 - Musa

实际上，即使您将其键入 jsfiddle 页面上的调试控制台中，错误仍然会出现。但是当“运行” fiddle 时，它没问题。啊，抱歉，那是由于 jsfiddle 的 iframes 导致的另一个错误。 - hippietrail

@hippietrail jsfiddle使用框架，因此直接在控制台中键入代码将无法正常工作。请尝试http://jsfiddle.net/mowglisanu/EQwt6/show/，它是相同的代码示例，但不在框架中。 - Musa

我正在爬取的网站使用的是jQuery v1.4.4，我想知道这是否有影响。 - hippietrail

这段代码在我下次使用它的时候成功运行了，当时我使用的是node.js和cheerio，它们只实现了DOM和jQuery的一部分子集。 - hippietrail

Answer 3

你可以使用replaceWith()函数。

$("br").replaceWith(" ");

- Mims H. Wright

---

我正要发布这个并组合这个相关的小样：http://jsfiddle.net/FCck2/ - Kavi Siegel