JavaScript
Article

jQuery .text() function

By Sam Deering

There are two versions of this jQuery text attribute: .text() and .text(val).

jQuery text() function

Syntax: .text()

Functionality: .text() gets all the combined text contents of all matched elements.

Browser Compatiablity: text() works in all browsers that we have tested on.

Basic Example:

Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).

jQuery text(val) function

Syntax: .text(val)

Functionality: .text(val) is similar to .html() but escapes HTML (replace “< ” and “>” with their HTML entities).

Browser Compatiablity: text(val) works in all browsers that we have tested on.

Basic Example:
Add text to the paragraph (notice the bold tag is escaped).

$("p").text("Some new text.");

Alternative to jQuery text() function

This is a jQuery function which can be used instead of jQuery’s .text() to preserves line-breaks.

(function($){
   $.fn.innerText = function(msg) {
         if (msg) {
            if (document.body.innerText) {
               for (var i in this) {
                  this[i].innerText = msg;
               }
            } else {
               for (var i in this) {
                  this[i].innerHTML.replace(/&lt;br&gt;/gi,"n").replace(/(&lt;([^&gt;]+)&gt;)/gi, "");
               }
            }
            return this;
         } else {
            if (document.body.innerText) {
               return this[0].innerText;
            } else {
               return this[0].innerHTML.replace(/&lt;br&gt;/gi,"n").replace(/(&lt;([^&gt;]+)&gt;)/gi, "");
            }
         }
   };
})(jQuery);

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • anonymous

    Your function doesn’t seem to work in FF.

  • anonymous

    This is crossbrowser:

    (function($){
    $.fn.innerText = function(msg) {
    if(msg) {
    if(document.body.innerText) {
    for(var i in this) {
    this[i].innerText = msg;
    }
    }
    else if(document.body.textContent) {
    for(var i in this) {
    this[i].textContent.replace(/&lt;br&gt;/gi,”n”).replace(/(&lt;([^&gt;]+)&gt;)/gi, “”);
    }
    }
    else {
    for(var i in this) {
    this[i].innerHTML.replace(/&lt;br&gt;/gi,”n”).replace(/(&lt;([^&gt;]+)&gt;)/gi, “”);
    }
    }
    return this;
    }
    else {
    if(document.body.innerText) {
    return this[0].innerText;
    }
    else if(document.body.textContent) {
    return this[0].textContent.replace(/&lt;br&gt;/gi,”n”).replace(/(&lt;([^&gt;]+)&gt;)/gi, “”);
    }
    else {
    return this[0].innerHTML.replace(/&lt;br&gt;/gi,”n”).replace(/(&lt;([^&gt;]+)&gt;)/gi, “”);
    }
    }
    };
    })(jQuery);

  • Jack

    If you’re going to cut-and past text from the Jquery API website for example”

    “Basic Example:

    Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).”

    At least post the example so that the text makes sense, Or, even better, don’t copy and paste your “articles”.

    You should also give credit to your sources.

  • Oscar Da Silva Cruz

    Great function! It works very fine! Thanks

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.