462

If I have html like this:

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

I'm trying to use .text() to retrieve just the string "This is some text", but if I were to say $('#list-item').text(), I get "This is some textFirst span textSecond span text".

Is there a way to get (and possibly remove, via something like .text("")) just the free text within a tag, and not the text within its child tags?

The HTML was not written by me, so this is what I have to work with. I know that it would be simple to just wrap the text in tags when writing the html, but again, the html is pre-written.

1

30 Answers 30

567

I liked this reusable implementation based on the clone() method found here to get only the text inside the parent element.

Code provided for easy reference:

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();
20
  • 6
    With this solution you only get the text without the child, but you can't replace only the text.
    – BenRoe
    Oct 1, 2012 at 21:19
  • 1
    I don't get 1 thing: If .end() goes back to selected element, than text() should copy original text with children elements. But in practice I see that text from our manipulated clone is being copied. So end() goes back to clone() ?
    – user796443
    Sep 3, 2013 at 8:59
  • 81
    This is a really inefficient way of doing this Apr 14, 2014 at 12:38
  • 10
    @billyonecan, can you suggest a more efficient method? This is appealing because it is "clean" and "short". What do you suggest? Dec 4, 2015 at 19:45
  • 2
    @derekmx271 have a look at Stuart's answer Dec 5, 2015 at 0:27
416
+50

Simple answer:

$("#listItem").contents().filter(function(){ 
  return this.nodeType == Node.TEXT_NODE; 
})[0].nodeValue = "The text you want to replace with" 

If for some reason you have to support Internet Explorer below version 8, you have to use 3 instead of Node.TEXT_NODE.

9
  • 47
    I don't understand why efficient answers (that dont generate extraneous data structures) are not voted up as much as answers that look less scary. +5 if I could.
    – Steven Lu
    May 7, 2013 at 3:06
  • 11
    This is not only more efficient but also correct! This solution caters for situations when the text is scattered between child elements. +5 Feb 4, 2014 at 6:37
  • 11
    This will break if you use it on something with no text. If you're using this as a function and have a scenario where you may or may not have text, just capture the .contents().filter(...) call into a local variable and check its length, e.g., var text = $(this).contents().filter(...); if (text.length) { return text[0].nodeValue; } return ""; Apr 21, 2015 at 14:09
  • as @CarlBussema said, this implementaion is NOT null-safe. to avoid this serious issue, DO NOT use [0].nodeValue directly.
    – makerj
    Mar 18, 2016 at 22:45
  • 1
    This worked amazingly well within a container that had other elements that get changed dynamically. Thanks Macio!
    – Low
    May 6, 2016 at 9:22
225

This seems like a case of overusing jquery to me. The following will grab the text ignoring the other nodes:

document.getElementById("listItem").childNodes[0];

You'll need to trim that but it gets you what you want in one, easy line.

EDIT

The above will get the text node. To get the actual text, use this:

document.getElementById("listItem").childNodes[0].nodeValue;
15
  • 48
    Best answer, you're not supposed to need a plugin for this or a chain of 10 jQuery calls. $('.foo')[0].childNodes[0].nodeValue.trim()
    – raine
    May 8, 2013 at 14:44
  • 6
    what if the text content is split up into several nodes (like a sequence of crlf, text, crlf)? are there any (rael-life) guarantees that the dom constructed by the ua will use the simplest structure ?
    – collapsar
    Oct 9, 2013 at 10:18
  • 5
    Totally the best answer... why other people sometimes over use jQuery?
    – ncubica
    Nov 19, 2014 at 22:12
  • 1
    Maybe to avoid having to take care of cross browser compatibility?
    – chukko
    Feb 13, 2016 at 19:23
  • 21
    This only works in the case of <div id="listItem">text you want<span>other</span></div>. It will not work for <div id="listItem"><span>other</span>text you want</div>
    – Spencer
    Jan 25, 2017 at 19:06
82

Easier and quicker:

$("#listItem").contents().get(0).nodeValue
5
  • Is this cross browser compatible ? May 2, 2014 at 13:23
  • Of course it retrieves one of the elements matched by the jQuery object given by the index: Jquery Docs .get(). Jun 6, 2014 at 19:03
  • 1
    @Nate In case you need use it on a <br/> tag you could use the macio.Jun's answer. Dec 23, 2014 at 19:34
  • 2
    Why get(0) instead of just [0]?
    – Clonkex
    Feb 17, 2020 at 5:26
  • 2
    Fails on <div id="listItem"> <div>Contents?</div> Text? What text? </div>
    – Travis J
    May 1, 2020 at 3:44
48

Similar to the accepted answer, but without cloning:

$("#foo").contents().not($("#foo").children()).text();

And here is a jQuery plugin for this purpose:

$.fn.immediateText = function() {
    return this.contents().not(this.children()).text();
};

Here is how to use this plugin:

$("#foo").immediateText(); // get the text without children
6
  • What is t in t.children()?
    – FrEaKmAn
    Mar 14, 2016 at 21:22
  • This is a duplicate solution of the one that pbjk wrote in Jan'15... nonetheless - it looks nice. Aug 17, 2016 at 17:10
  • 2
    Not really, @Oskar. The .contents() part is critical here!
    – DUzun
    Aug 18, 2016 at 18:05
  • 6
    @AndroidDev You can always replace the selector with whatever works for you. This is just to illustrate the technique! I also added a Plugin version to show that it works even without IDs
    – DUzun
    Aug 15, 2017 at 7:19
  • 1
    You get my upvote for the jQuery plugin - a very elegant solution to tackle it in the most generic & usable way. Jun 1, 2021 at 0:35
8

isn't the code:

var text  =  $('#listItem').clone().children().remove().end().text();

just becoming jQuery for jQuery's sake? When simple operations involve that many chained commands & that much (unnecessary) processing, perhaps it is time to write a jQuery extension:

(function ($) {
    function elementText(el, separator) {
        var textContents = [];
        for(var chld = el.firstChild; chld; chld = chld.nextSibling) {
            if (chld.nodeType == 3) { 
                textContents.push(chld.nodeValue);
            }
        }
        return textContents.join(separator);
    }
    $.fn.textNotChild = function(elementSeparator, nodeSeparator) {
    if (arguments.length<2){nodeSeparator="";}
    if (arguments.length<1){elementSeparator="";}
        return $.map(this, function(el){
            return elementText(el,nodeSeparator);
        }).join(elementSeparator);
    }
} (jQuery));

to call:

var text = $('#listItem').textNotChild();

the arguments are in case a different scenario is encountered, such as

<li>some text<a>more text</a>again more</li>
<li>second text<a>more text</a>again more</li>

var text = $("li").textNotChild(".....","<break>");

text will have value:

some text<break>again more.....second text<break>again more
1
  • 1
    Nice. How about making this a pull request for the next version of jQuery? Apr 13, 2014 at 1:17
8

Try this:

$('#listItem').not($('#listItem').children()).text()
1
6

It'll need to be something tailored to the needs, which are dependent on the structure you're presented with. For the example you've provided, this works:

$(document).ready(function(){
     var $tmp = $('#listItem').children().remove();
     $('#listItem').text('').append($tmp);
});

Demo: http://jquery.nodnod.net/cases/2385/run

But it's fairly dependent on the markup being similar to what you posted.

2
  • 2
    Future reader beware: the code in this answer kills the children in the actual element. One should use the clone method here if that's not the intended effect.
    – Mahn
    Mar 1, 2013 at 17:29
  • @DotNetWala's answer, below, and should be used instead of this one. Or at the least, use the .detach() method instead of .remove(). Jun 3, 2013 at 23:26
5

If the position index of the text node is fixed among its siblings, you can use

$('parentselector').contents().eq(index).text()
4
$($('#listItem').contents()[0]).text()

Short variant of Stuart answer.

or with get()

$($('#listItem').contents().get(0)).text()
4

I presume this would be a fine solution also - if you want to get contents of all text nodes that are direct children of selected element.

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

Note: jQuery documentation uses similar code to explain contents function: https://api.jquery.com/contents/

P.S. There's also a bit uglier way to do that, but this shows more in depth how things work, and allows for custom separator between text nodes (maybe you want a line break there)

$(selector).contents().filter(function(){ return this.nodeType == 3; }).map(function() { return this.nodeValue; }).toArray().join("");
4
jQuery.fn.ownText = function () {
    return $(this).contents().filter(function () {
        return this.nodeType === Node.TEXT_NODE;
    }).text();
};
1
  • 1
    Thank you for this code snippet, which may provide some immediate help. A proper explanation would greatly improve its educational value by showing why this is a good solution to the problem, and would make it more useful to future readers with similar, but not identical, questions. Please edit your answer to add explanation, and give an indication of what limitations and assumptions apply. Aug 16, 2017 at 10:16
3

This is an old question but the top answer is very inefficient. Here's a better solution:

$.fn.myText = function() {
    var str = '';

    this.contents().each(function() {
        if (this.nodeType == 3) {
            str += this.textContent || this.innerText || '';
        }
    });

    return str;
};

And just do this:

$("#foo").myText();
0
2

I wouldn't bother with jQuery for this, especially not the solutions that make unnecessary clones of the elements. A simple loop grabbing text nodes is all you need. In modern JavaScript (as of this writing — "modern" is a moving target!) and trimming whitespace from the beginning and end of the result:

const { childNodes } = document.getElementById("listItem");
let text = "";
for (const node of childNodes) {
    if (node.nodeType === Node.TEXT_NODE) {
        text += node.nodeValue;
    }
}
text = text.trim();

Live Example:

const { childNodes } = document.getElementById("listItem");
let text = "";
for (const node of childNodes) {
    if (node.nodeType === Node.TEXT_NODE) {
        text += node.nodeValue;
    }
}
console.log(text);
<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

Some people would use reduce for this. I'm not a fan, I think a simple loop is clearer, but this usage does update the accumulator on each iteration, so it's not actually abusing reduce:

const { childNodes } = document.getElementById("listItem");
const text = [...childNodes].reduce((text, node) =>
    node.nodeType === Node.TEXT_NODE ? text + node.nodeValue : text
, "").trim();

const { childNodes } = document.getElementById("listItem");
const text = [...childNodes].reduce((text, node) =>
    node.nodeType === Node.TEXT_NODE ? text + node.nodeValue : text
, "").trim();
console.log(text);
<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

Or without creating a temporary array:

const { childNodes } = document.getElementById("listItem");
const text = Array.prototype.reduce.call(childNodes, (text, node) =>
    node.nodeType === Node.TEXT_NODE ? text + node.nodeValue : text
, "").trim();

const { childNodes } = document.getElementById("listItem");
const text = Array.prototype.reduce.call(childNodes, (text, node) =>
    node.nodeType === Node.TEXT_NODE ? text + node.nodeValue : text
, "").trim();
console.log(text);
<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

1

I propose to use the createTreeWalker to find all texts elements not attached to html elements (this function can be used to extend jQuery):

function textNodesOnlyUnder(el) {
  var resultSet = [];
  var n = null;
  var treeWalker  = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, function (node) {
    if (node.parentNode.id == el.id && node.textContent.trim().length != 0) {
      return NodeFilter.FILTER_ACCEPT;
    }
    return NodeFilter.FILTER_SKIP;
  }, false);
  while (n = treeWalker.nextNode()) {
    resultSet.push(n);
  }
  return resultSet;
}



window.onload = function() {
  var ele = document.getElementById('listItem');
  var textNodesOnly = textNodesOnlyUnder(ele);
  var resultingText = textNodesOnly.map(function(val, index, arr) {
    return 'Text element N. ' + index + ' --> ' + val.textContent.trim();
  }).join('\n');
  document.getElementById('txtArea').value = resultingText;
}
<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>
<textarea id="txtArea" style="width: 400px;height: 200px;"></textarea>

1

Using plain JavaScript in IE 9+ compatible syntax in just a few lines:

const childNodes = document.querySelector('#listItem').childNodes;

if (childNodes.length > 0) {
    childNodesLoop:
    for (let i = 0; i < childNodes.length; i++) {
        //only target text nodes (nodeType of 3)
        if (childNodes[i].nodeType === 3) {
            //do not target any whitespace in the HTML
            if (childNodes[i].nodeValue.trim().length > 0) {
                childNodes[i].nodeValue = 'Replacement text';
                //optimized to break out of the loop once primary text node found
                break childNodesLoop;
            }
        }
    }
}
3
  • A couple of notes: I wouldn't call that variable children, because the children property of an element is a list of its child elements. I'd use childNodes to avoid confusion. Also, there's no need for the label, there's just the one loop, break will break the right thing. Also, the "primary text" thing seems to come out of left field, the OP doesn't mention stopping early for any reason. Feb 18, 2022 at 7:53
  • The variable renaming sounds good, but I used a label for the for loop just because I like to see which loop I'm breaking especially when there's text in between. It doesn't hurt performance to label the for loop. And in the original post, it said "a text node" which makes anyone infer that there is only one element being targeted in that list. It is faster to break if there's only one possibility to replace. Feb 18, 2022 at 21:57
  • 1
    As you say, no harm in labelling it for clarity. :-) Feb 19, 2022 at 8:51
1

Get all text in an element without text in any child elements still seems non trivial to do in 2022.
No jQuery needed though.

To get all raw textNode(s) content:

const getElementTextWithoutChildElements = (el) =>
  Array.from(el.childNodes)               // iterator to array
    .filter(node => node.nodeType === 3)  // only text nodes
    .map(node => node.textContent)        // get text
    .join('')                             // stick together
;

Or similar, using reduce:

const getElementTextWithoutChildElements = (el) =>
  [].reduce.call(
    el.childNodes, 
    (a, b) => a + (b.nodeType === 3 ? b.textContent : ''),
    ''
  );

Should work with this:

<div>
  you get this
  <b>not this</b>
  you get this   too
</div>

will return:


  you get this

  you get this   too

Whitespace between elements could be tricky, suggest using with .trim() and/or normalize all whitespace, e.g.
For debugging and logging to quickly identify elements I find this is usually enough:

getElementTextWithoutChildElements(...).replace(/\s+/g, ' ').trim();
// 'you get this you get this too'

Though you might want to tweak whitespace differently, perhaps within the reduce() function itself to handle whitespace per node.

e.g. whitespace handling per node:

const getElementTextWithoutChildElements_2 = (el) =>
  Array.from(el.childNodes)
    .filter(node => node.nodeType === 3)
    .map(node => node.textContent.trim()) // added .trim()
    .join(',')                            // added ','
;

Quick tests for things above:

document.body.innerHTML = `
  you get this
  <b>not this</b>
  you get this   too
`;
// '\n  you get this\n  <b>not this</b>\n  you get this   too\n'

getElementTextWithoutChildElements(document.body);
// '\n  you get this\n  \n  you get this   too\n'

getElementTextWithoutChildElements(document.body).replace(/\s+/g, ' ').trim();
// 'you get this you get this too'

getElementTextWithoutChildElements_2(document.body);
// 'you get this,you get this   too'
0

This is a good way for me

   var text  =  $('#listItem').clone().children().remove().end().text();
1
0

I came up with a specific solution that should be much more efficient than the cloning and modifying of the clone. This solution only works with the following two reservations, but should be more efficient than the currently accepted solution:

  1. You are getting only the text
  2. The text you want to extract is before the child elements

With that said, here is the code:

// 'element' is a jQuery element
function getText(element) {
  var text = element.text();
  var childLength = element.children().text().length;
  return text.slice(0, text.length - childLength);
}
0

Live demo

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

<input id="input" style="width: 300px; margin-top: 10px;">

    <script type="text/javascript">
$("#input").val($("#listItem").clone().find("span").remove().end().text().trim());
    //use .trim() to remove any white space
    </script>
0

For beginners:

I preferred @DUzun's answer because it's simple to understand and more efficient than the accepted answer. But it only partially worked for me as you can't directly pass the element with a class selector like this

$(".landing-center .articlelanding_detail").get(0).immediateText() //gives .immediateText is not a function error

or this

$(".landing-center .articlelanding_detail")[0].immediateText() //gives .immediateText is not a function error

because once you extract the native Element by using [index] or .get(index) out of the $() function you loose jQuery Object methods chainability as mentioned here. And most of the solutions are only in context to ids, not so elegant to use multiple times for the elements with a class selectors.

So, I wrote jQuery plugin:

$.fn.mainText = function(x=0) {
    return $.trim(this.eq(x).contents().not(this.eq(x).children()).text().replace(/[\t\n]+/g,' '));
};

This will return the text of the element irrespective of if ids or class are used as selectors excluding child elements. Also will remove any \t or \n to get a clean string. Use it like this:

Case 1

$("#example").mainText(); // get the text of element with example id

Case 2

$(".example").mainText(); // get the text of first element with example class

Case 3

$(".example").mainText(1); // get the text of second element with example class and so on..
0

Alternative version of the answere without JQuery

[...document.getElementById("listItem").childNodes].find(c => c.nodeType === Node.TEXT_NODE).nodeValue
-1

Just like the question, I was trying to extract text in order to do some regex substitution of the text but was getting problems where my inner elements (ie: <i>, <div>, <span>, etc.) were getting also removed.

The following code seems to work well and solved all my problems.

It uses some of the answers provided here but in particular, will only substitute the text when the element is of nodeType === 3.

$(el).contents().each(function() { 
  console.log(" > Content: %s [%s]", this, (this.nodeType === 3));

  if (this.nodeType === 3) {
    var text = this.textContent;
    console.log(" > Old   : '%s'", text);

    regex = new RegExp("\\[\\[" + rule + "\\.val\\]\\]", "g");
    text = text.replace(regex, value);

    regex = new RegExp("\\[\\[" + rule + "\\.act\\]\\]", "g");
    text = text.replace(regex, actual);

    console.log(" > New   : '%s'", text);
    this.textContent = text;
  }
});

What the above does is loop through all the elements of the given el (which was simply obtained with $("div.my-class[name='some-name']");. For each inner element, it basically ignores them. For each portion of text (as determined by if (this.nodeType === 3)) it will apply the regex substitution only to those elements.

The this.textContent = text portion simply replaces the substituted text, which in my case, I was looking for tokens like [[min.val]], [[max.val]], etc.

This short code excerpt will help anyone trying to do what the question was asking ... and a bit more.

-1

Not sure how flexible or how many cases you need it to cover, but for your example, if the text always comes before the first HTML tags – why not just split the inner html at the first tag and take the former:

$('#listItem').html().split('<span')[0]; 

and if you need it wider maybe just

$('#listItem').html().split('<')[0]; 

and if you need the text between two markers, like after one thing but before another, you can do something like (untested) and use if statements to make it flexible enough to have a start or end marker or both, while avoiding null ref errors:

var startMarker = '';// put any starting marker here
var endMarker = '<';// put the end marker here
var myText = String( $('#listItem').html() );
// if the start marker is found, take the string after it
myText = myText.split(startMarker)[1];        
// if the end marker is found, take the string before it
myText = myText.split(endMarker)[0];
console.log(myText); // output text between the first occurrence of the markers, assuming both markers exist.  If they don't this will throw an error, so some if statements to check params is probably in order...

I generally make utility functions for useful things like this, make them error free, and then rely on them frequently once solid, rather than always rewriting this type of string manipulation and risking null references etc. That way, you can re-use the function in lots of projects and never have to waste time on it again debugging why a string reference has an undefined reference error. Might not be the shortest 1 line code ever, but after you have the utility function, it is one line from then on. Note most of the code is just handling parameters being there or not to avoid errors :)

For example:

/**
* Get the text between two string markers.
**/
function textBetween(__string,__startMark,__endMark){
    var hasText = typeof __string !== 'undefined' && __string.length > 0;
    if(!hasText) return __string;
    var myText = String( __string );
    var hasStartMarker = typeof __startMark !== 'undefined' && __startMark.length > 0 && __string.indexOf(__startMark)>=0;
    var hasEndMarker =  typeof __endMark !== 'undefined' && __endMark.length > 0 && __string.indexOf(__endMark) > 0;
    if( hasStartMarker )  myText = myText.split(__startMark)[1];
    if( hasEndMarker )    myText = myText.split(__endMark)[0];
    return myText;
}

// now with 1 line from now on, and no jquery needed really, but to use your example:
var textWithNoHTML = textBetween( $('#listItem').html(), '', '<'); // should return text before first child HTML tag if the text is on page (use document ready etc)
1
  • if you need to replace text, just use $('#listItem').html( newHTML ); where newHTML is a variable that already has the stripped down text.
    – OG Sean
    May 29, 2020 at 20:54
-2

Use an extra condition to check if innerHTML and innerText are the same. Only in those cases, replace the text.

$(function() {
$('body *').each(function () {
    console.log($(this).html());
    console.log($(this).text());
    if($(this).text() === "Search" && $(this).html()===$(this).text())  {
        $(this).html("Find");
    }
})
})

http://jsfiddle.net/7RSGh/

-2

To be able to trim the result, use DotNetWala's like so:

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text()
    .trim();

I found out that using the shorter version like document.getElementById("listItem").childNodes[0] won't work with jQuery's trim().

3
  • 3
    That's because document.getElementById("listItem").childNodes[0] is plain javascript, you'd have to wrap it in the jQuery function $(document.getElementById("listItem").childNodes[0]).trim()
    – Red Taz
    Feb 20, 2015 at 8:11
  • Okay that makes sense. Haha. Thanks!
    – Marion Go
    Aug 19, 2015 at 5:10
  • 1
    This is nearly identical to DotNetWala's answer. All you did was added .trim() to the end. Is this answer necessary? Jun 21, 2017 at 18:34
-3

just put it in a <p> or <font> and grab that $('#listItem font').text()

First thing that came to mind

<li id="listItem">
    <font>This is some text</font>
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>
2
  • 6
    I don't have control over putting the free text in tags, because the code I'm working off of was not created by me. If I could grab just that text, I could remove it and replace it with tags around it, or do anything I want. But again, the html is already pre-written.
    – MegaMatt
    Aug 9, 2010 at 17:14
  • ah, ok. Then I think you're going to have to filter the results :S sorry.
    – Dorjan
    Aug 9, 2010 at 17:18
-3

You can try this

alert(document.getElementById('listItem').firstChild.data)
0
-3

I am not a jquery expert, but how about,

$('#listItem').children().first().text()
1
  • 1
    If you're note a jquery expert, then why not become more of an expert by reading through the other answers first?... One of them happened to be virtually the same as what you wrote, with comments below that explain why it's not a good idea. Aug 17, 2016 at 17:13
-4

This untested, but I think you may be able to try something like this:

 $('#listItem').not('span').text();

http://api.jquery.com/not/

1
  • 4
    Because it's the same as $('#listItem').text(). #listItem isn't a <span> so adding not('span') doesn't do anything. Mar 20, 2014 at 14:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.