How to strip HTML tags with jQuery?

Question

I want to remove HTML tags from a string. For example assume we have the string:

 <p> example ive got a string</P> 

How can I write a function that removes the <p><p> and returns just "example ive got a string"?

Answer 1

Use the .text() function:

var text = $("<p> example ive got a string</P>").text(); 

Update: As Brilliand points out below, if the input string does not contain any tags and you are unlucky enough, it might be treated as a CSS selector. So this version is more robust:

var text = $("<div/>").html("<p> example ive got a string</P>").text(); 

Answer 2

The safest way is to rely on the browser TextNode to correctly escape content. Here's an example:

function encodeHTML(dirtyString) {   var container = document.createElement('div');   var text = document.createTextNode(dirtyString);   container.appendChild(text);   return container.innerHTML; // innerHTML will be a xss safe string }  document.write( encodeHTML('<p>some <span>content</span></p>') ); document.write( encodeHTML('<script><p>some <span>content</span></p>') );

The thing to remember here is that the browser escape the special characters of TextNodes when we access the html strings (innerHTML, outerHTML). By comparison, accessing text values (innerText, textContent) will yield raw strings, meaning they're unsafe and could contains XSS.

If you use jQuery, then using .text() is safe and backward compatible. See the other answers to this question.

The simplest way in pure JavaScript if you work with browsers <= Internet Explorer 8 is:

string.replace(/(<([^>]+)>)/ig,""); 

But there's some issue with parsing HTML with regex so this won't provide very good security. Also, this only takes care of HTML characters, so it is not totally xss-safe.