One of the useful features most JavaScript libraries offer is the ability to strip out HTML tags from strings, leaving only the text. This is useful because you may have user input that you need to "sanitize" by removing potentially malicious HTML.
Luckily this is quite easy to do in jQuery. According to the docs, you should be able to call the .text() method on any jQuery-wrapped string. Consider the following:
<pre class=”js” name=”code”>
var html = “this string has <i>html</i> code i want to <b>remove</b>”;
$(html).text(); // should return “this string has html code i want to remove” but doesn’t
</pre>
In my experience, although it should theoretically be this simple, it isn’t. I noticed that this only works correctly (at least, for me, with jQuery 1.3) if the string starts with an HTML tag. So, it will work fine as long as there is a wrapping tag around the whole thing. Otherwise, I will end up with only a fragment of the HTML. In the above example, I’d end up with only the word “html” since it is the fragment inside the first HTML tag.
<br /><br />
Let’s try this instead:
<pre class=”js” name=”code”>
var html = “this string has <i>html</i> code i want to <b>remove</b>”;
$(html).text(); // returns “html”
// This is the workaround to return the whole string, sans any markup
$(‘<div>’ + html ‘</div>’).text(); // returns “this string has html code i want to remove”
</pre>
By wrapping the string in addition markup to ensure it has an outermost element wrapping the entirety of the text content, we reach the goal of having a relatively straightforward way to sanitize text.
<br /><br />
For a bonus, one could turn it into a helper function and add it to a utility file:
<pre class=”js” name=”code”>
function stripHTML(html) {
return $(‘<div>’ + html ‘</div>’).text();
}
var html = “this string has <i>html</i> code i want to <b>remove</b>”;
stripHtml(html); // returns “this string has html code i want to remove”
</pre>
If you really wanted to go the extra mile, you could turn it into a plugin. Perhaps that will be the topic of another article.
#1 by Jeff on October 15, 2009 - 4:50 pm
I think the simplest way to strip tags would be very similar to how you do it, something like: jQuery(‘<div>’).html(html).text() . This is the opposite of what I use to escape html characters in text: jQuery(‘<div>’).text(notHtml).html() . A string like ‘a <b>b</b>’ run through the first one would give ‘a b’, while the second would give ‘a <b>b</b>’.