Javascript 获取没有子项的HTML

因此，我有一段HTML代码，看起来像这样：

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

SOMEUSERNAME20好友

使用一个简单的

$（“.name”）

我可以轻松地查看内部信息，但是有没有办法只获取用户名而不获取元数据？我知道我可以使用正则表达式，但我更想知道是否可以直接使用jQuery选择器，因为我对这方面还是有点陌生。

试试这个：

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

---

希望这能有所帮助。

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

$('.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('')

---

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

.contents（）

将返回所有子项，包括文本节点。您可以这样做：

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

---

似乎没有jQuery会更容易

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

对于更多的元素，您可以这样做

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

或者对于较旧的浏览器

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

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

或者更像jQuery'ish

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

---

你为什么不这样试试

 <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>

SOMEUSERNAME
20个朋友
点击我
函数foo（）{
var name=document.getElementById（'name'）.innerHtml；
document.getElementById（'result'）.innerHtml=名称；
}

---

您只需要

$（'selector'）.get（0）.childNodes[0]

@rafaelcastrocouto，它假定标记将始终使用完全相同的格式（实际上可能是这样）。值得注意的是，该解决方案不适用于只需要子文本的通用标记结构。我喜欢它的链式结构。该解决方案的效果更差performance@rafaelcastrocouto是的，性能很差。。。但也不太可能成为瓶颈。无论如何，我用一个更好的解决方案更新了我的答案。这个解决方案的性能更差。我有几百个用户名，希望创建一个用户名数组，而不仅仅是第一个。@user3216060-这不是问题，请注意jQuery也不会返回数组，除非您使用map（）进行迭代。

 <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>

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