Get HTML without sub-children

Question

So, I have a piece of HTML code that looks something like this:

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

With a simple $(".name") I can easily the insides, but is there a way to get just the username without the meta data? I know I could use RegEx, but I'd rather know if it can be done with jQuery selectors directly, since I'm still somewhat new to that thing.

@rafaelcastrocouto that assumes that the markup will always be in that exact same format (which may actually be the case). Just worth noting that the solution won't work for generic markup structures where only child text is desired. — jmar777, Jan 20 '14 at 17:31

adeneo · Answer 1 · 2014-01-20T17:32:12.493

3

Seems like something that would be easier without jQuery

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

FIDDLE

for more elements you can do

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

FIDDLE

or for older browsers

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

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

FIDDLE

or more jQuery'ish

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

FIDDLE

edited Jan 20 '14 at 17:32

answered Jan 20 '14 at 17:22

adeneo

312,895
29
395
388

Thing is, I have a few hundreds of these and wanted to create an array of the user names, not just the first one. – Selbi Jan 20 '14 at 17:27
@user3216060 - That's not a problem, note that jQuery does not return an array either, unless you iterate, for instance with map(). – adeneo Jan 20 '14 at 17:32

score 0 · Answer 2 · answered Jan 20 '14 at 17:19

0

Try this:

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

Hope this helps.

answered Jan 20 '14 at 17:19

taxicala

21,408
7
37
66

jmar777 · Answer 3 · 2014-01-20T17:46:28.610

0

Not sure this is the most efficient approach, but this should work:

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

Edit: here's a more efficient solution:

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

Edit: just for fun, here's a potentially "more idiomatic" jQuery approach:

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

edited Jan 20 '14 at 17:46

answered Jan 20 '14 at 17:19

jmar777

38,796
11
66
64

I love the chainy-ness of this. – Drumbeg Jan 20 '14 at 17:22
this solution has the worse performance – rafaelcastrocouto Jan 20 '14 at 17:24
@rafaelcastrocouto Yes, the performance is poor... but not likely to be a bottleneck either. Updated my answer with a better solution, anyway. – jmar777 Jan 20 '14 at 17:33

score 0 · Answer 4 · answered Jan 20 '14 at 17:20

0

Try this, if you just want the username (without the 20 friends stuff)

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

http://jsfiddle.net/9GEfY/

answered Jan 20 '14 at 17:20

23tux

14,104
15
88
187

this solution has the worse performance – rafaelcastrocouto Jan 20 '14 at 17:23

score 0 · Answer 5 · answered Jan 20 '14 at 17:20

0

.contents() will return all children, including text nodes. You can do something like this:

http://jsfiddle.net/MnCDb/

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

answered Jan 20 '14 at 17:20

Jason P

26,984
3
31
45

score 0 · Answer 6 · answered Jan 20 '14 at 17:23

Why don't you try like this?

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

score 0 · Answer 7 · answered Jan 20 '14 at 17:29

0

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

jsFiddle example

answered Jan 20 '14 at 17:29

j08691

204,283
31
260
272

Get HTML without sub-children

7 Answers7