Question

考虑包含文本的元素。 <h1>Title text <span>inner text</span></h1>或<h1>Title text <span>inner <b>text</b></span></h1>

当它呈现时它看起来像Title text inner text，但实际上，当我想获得h1的文本内容时，它也会返回内部子元素。

如何确保将所有此类案例格式化为以下内容？

<h1>Title text inner text</h1>

基本上去除任何装饰性内部元素？我需要通过它的文本值选择一个元素，不幸的是这些内部子元素会干扰。例如，当我尝试使用像*[text()='Title text inner text']这样的xpath匹配元素时，它找不到它，因为有内部子元素。对于人类读者来说，这似乎很自然，因为文本似乎只限于它自己，但是底层的html结构却不然。

Answer 1

我认为您正在寻找类似的内容：http://jsfiddle.net/VwTHF/173/

var temp='<h1>Title text <span>inner <b>text</b></span></h1>';

var $temp = $(temp).find('span, b ,h1').contents().unwrap().end().end();

虽然Barmar的解决方案看起来也很可行。

Answer 2

这会将所有h1元素'文本设置为文本，而无需额外的HTML：

$('h1').text(function(i, orig) { return orig; } );

Answer 3

您可以使用innerText属性。它返回所有文本。

http://help.dottoro.com/ljhvexii.php

用法：

var elem = document.getElementById ("myDiv");
message += "\ninner text : " + elem.innerText;

alert (message);

在这里看到这个小提琴：

http://jsfiddle.net/wxnY4/

jquery：用它的文本替换内部子元素，以便外部元素的文本只返回文本？

3 个答案: