javascript - How to select own text of the element using jQuery - Stack Overflow

admin管理员组

文章数量:1332339

I have the following html:

<div>
    <div id="t1">Text1</div> 
    <div id="t2">
        Text2 
        <ul id="t3">
            <li id="t4">Text3</li>
        </ul>
    </div>
</div>

I want to select only own text for each element. I tried to use jQuery text function, but it returns the bined text content of all elements in selection:

t1 => Text1
t2 => Text2 Text3
t3 => Text3
t4 => Text3

And what I need:

t1 => Text1
t2 => Text2
t3 =>
t4 => Text3 

I have the following html:

<div>
    <div id="t1">Text1</div> 
    <div id="t2">
        Text2 
        <ul id="t3">
            <li id="t4">Text3</li>
        </ul>
    </div>
</div>

I want to select only own text for each element. I tried to use jQuery text function, but it returns the bined text content of all elements in selection:

t1 => Text1
t2 => Text2 Text3
t3 => Text3
t4 => Text3

And what I need:

t1 => Text1
t2 => Text2
t3 =>
t4 => Text3 

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 21, 2017 at 21:42 alexmac asked Jan 21, 2014 at 5:02 alexmacalexmac 19.6k77 gold badges6464 silver badges7474 bronze badges 3

• Can you post your text function here – Durgaprasad Commented Jan 21, 2014 at 5:09
• 2 stackoverflow./questions/3442394/… I think there's your answer. – spaceman Commented Jan 21, 2014 at 5:10
• You can try to apply html function and have a look whether there is some taginside. developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Tigran Commented Jan 21, 2014 at 5:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

$.fn.ownText = function() {
    return this.eq(0).contents().filter(function() {
       return this.nodeType === 3 // && $.trim(this.nodeValue).length;
    }).map(function() {
       return this.nodeValue;
    }).get().join('');
}

var text = $('#t2').ownText();

http://jsfiddle/5L9Ww/

A slightly faster alternative:

$.fn.ownText = function() {
    var children = this.get(0).childNodes, 
        l = children.length,
        a = [];
    for (var i = 0; i < l; i++) {
      if (children[i].nodeType === 3) 
          a.push(children[i].nodeValue);
    }
    return a.join('');
}

Or a different method that accepts a glue for joining the node's values and an option for trimming the result:

$.fn.ownText = function(o) {
    var opt = $.extend({ glue: "", trim: false }, o),
        children = this.get(0).childNodes, 
        l = children.length,
        a = [];
    for (var i = 0; i < l; i++) {
        if (children[i].nodeType === 3) {
          var val = children[i].nodeValue;
          a.push(opt.trim ? $.trim(val) : val);
        }
    }
    return a.join(opt.glue);
}

$('#t2').ownText({
    glue: ',',
    trim: true
});

Try

function getText(el) {
    return $(el).contents().map(function () {
        return this.nodeType == 3 && $.trim(this.nodeValue) ? $.trim(this.nodeValue) : undefined;
    }).get().join('')
}

$('div *').each(function () {
    console.log(this.id, getText(this))
})

Demo: Fiddle

Better way to do it is :

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

Demo here :

http://jsfiddle/dM247/1/

This is not optimized version but you can optimize it :-) Thank you!

try this

  var n = new Array();
 $("div div, li").each(function () {

    n[$(this).attr('id')] = $(this).text()

 })
 console.log(n)

Demo http://jsfiddle/KVLDD/

本文标签： javascriptHow to select own text of the element using jQueryStack Overflow