获取没有子项的 HTML [重复]答案

【问题标题】：Get HTML without sub-children [duplicate]获取没有子项的 HTML [重复]
【发布时间】：2014-02-09 23:39:07
【问题描述】：

所以，我有一段看起来像这样的 HTML 代码：

<span class="name">SOMEUSERNAME<span class="meta">20 friends</span></span>

使用简单的$(".name") 我可以轻松了解内部信息，但是有没有办法只获取用户名而不获取元数据？我知道我可以使用 RegEx，但我更想知道它是否可以直接使用 jQuery 选择器来完成，因为我对那个东西还有些陌生。

【问题讨论】：

你只需要$('selector').get(0).childNodes[0]
@rafaelcastrocouto 假定标记将始终采用完全相同的格式（实际上可能是这种情况）。值得注意的是，该解决方案不适用于只需要子文本的通用标记结构。

标签： javascript jquery

【解决方案1】：

似乎没有 jQuery 会更容易

document.querySelectorAll('.name')[0].firstChild.nodeValue

FIDDLE

你可以做更多的元素

var users = Array.prototype.slice.call(document.querySelectorAll('.name')).map(function(el) {
    return el.firstChild.nodeValue;
});

FIDDLE

或者对于旧版浏览器

var elems = document.querySelectorAll('.name');
    users = [];

for (var i=elems.length; i--;) {
    users.push(elems[i].firstChild.nodeValue);
}

FIDDLE

或更多 jQuery'ish

var users = $.map($('.name'), function(el) {
    return el.firstChild.nodeValue;
});

FIDDLE

【讨论】：

问题是，我有几百个这样的，想创建一个用户名数组，而不仅仅是第一个。
@user3216060 - 这不是问题，请注意 jQuery 也不返回数组，除非您进行迭代，例如使用 map()。

【解决方案2】：

试试这个：

var name = $('#name').clone();
name.find('.meta').remove();
console.log(name);

希望这会有所帮助。

【讨论】：

【解决方案3】：

试试这个，如果你只想要用户名（没有 20 个朋友的东西）

$(".name").clone().children().remove().end().text();

http://jsfiddle.net/9GEfY/

【讨论】：

这个方案性能更差

【解决方案4】：

.contents() 将返回所有子节点，包括文本节点。你可以这样做：

http://jsfiddle.net/MnCDb/

$(".name").contents().get(0).textContent;

【讨论】：

【解决方案5】：

你为什么不这样尝试呢？

 <span class="name" id="name">SOMEUSERNAME
 <span class="meta" id="meta">20 friends</span>
 </span>
 <button onClick="foo()">click me </button>

 <div id='result'></div>
 <script>

 function foo(){
 var names=document.getElementById('name').innerHtml;
 document.getElementById('result').innerHtml=names;
 }


 </script>

【讨论】：

【解决方案6】：

$('span').filter(function(){return this.className=='name'}).get(0).firstChild;

jsFiddle example

【讨论】：

【解决方案7】：

不确定这是最有效的方法，但应该可行：

$('.name').clone().children().remove().end().text();

编辑：这是一个更有效的解决方案：

var text = $.map($('.name').contents(), function(node) {
    return node.nodeType === 3 ? node.nodeValue : '';
}).join('');

编辑：只是为了好玩，这里有一个可能“更惯用”的 jQuery 方法：

var text = $($('.name').contents()).filter(function() {
    return this.nodeType === 3;
}).map(function() {
    return this.nodeValue;
}).get().join('')

【讨论】：

我喜欢它的链条。
这个方案性能更差
@rafaelcastrocouto 是的，性能很差......但也不太可能成为瓶颈。无论如何，用更好的解决方案更新了我的答案。