只在标签中保留“裸”文本

Question

我有这个基本的HTML：

<h2>Edit <small>additional text</small></h2>
<div id="result"></div>

我可以轻松获取“编辑”（'裸'）文本，删除“小”标记：

var onlytext = $( "h2" ).prop( "firstChild" ).nodeValue;
$( "#result" ).append(onlytext);

这是小提琴，到目前为止一直很好：http://jsfiddle.net/822dm/

现在我想在文字前加一个图标，得到这个：

<h2><i class="fa fa-edit"></i> Edit <small>additional text</small></h2>
<div id="result"></div>

但是，在这种情况下，javascript停止工作：http://jsfiddle.net/822dm/1/

我尝试var onlytext = $( "h2" ).prop( "firstChild" ).text();：这会移除图标，但会保留“小”标记文字

请帮忙吗？考虑“i”和“small”标签可以是可选的 提前谢谢！

Answer 1

一种可能的方法：

var onlytext = $('h2').contents().filter(function(){return this.nodeType===3});
$('#result').append(onlytext.clone());

Demo。这很简单，实际上：只有.contents()只收集所选元素的立即子元素，然后过滤结果，只留下文本节点。实际上，这条线......

.contents().filter(function(){return this.nodeType===3});

...当你在jQuery中处理文本时，这是一个非常常见的习惯用法。

Answer 2

您要做的就是删除<h2>标记的子元素。因此，您只能将Edit作为文字。

查看此fiddle

希望它有所帮助。

Answer 3

您可以使用Regex删除所有html标记：

http://jsfiddle.net/jabark/822dm/6/

var onlytext = $('h2').html();
onlytext = onlytext.replace(/\<.*?\>[^\<]*?\<\/.*?\>/g, '');
$( "#result" ).append(onlytext);

Answer 4

你为什么要为此添加黑客攻击？

稍微更改HTML并在span代码

中扭曲文字

<h2><i class="fa fa-edit"></i> <span>Edit</span> <small>additional text</small></h2>

然后你可以做$("h2 span").text()之类的事情。