Strip html tags with jQuery

Sometimes we need to alter html code rendered by a CMS but we don’t want to change the source code. For example, stripping html tags from a particular Document Object Model (DOM) is something I often need to do, and jQuery makes this task quite easy. We will work with the following for the examples: a collection of links contained in separate span objects, which looks like this:

<div class="example_1">
	<span class="my_target_link"><a href="#">1</a></span>
	<span class="my_target_link"><a href="#">2</a></span>
	<span class="my_target_link"><a href="#">3</a></span>
	<span class="my_target_link"><a href="#">4</a></span>
	<span class="my_target_link"><a href="#">5</a></span>
	<span class="my_safe_link"><a href="#">6</a></span>
	<span class="my_safe_link"><a href="#">7</a></span>
	<span class="my_safe_link"><a href="#">8</a></span>
	<span class="my_safe_link"><a href="#">9</a></span>
	<span class="my_safe_link"><a href="#">10</a></span>
</div>

It looks like this:

1 2 3 4 5 6 7 8 9 10

Example 1: Strip all html tags inside a div, and keep only the text.

This part is not really complicated since it applies to only one object. We change the html value of div.example_1 for its text value.

( The DIV for this example has the class ‘example_1′ assigned to it )

	/*	Example 1 	*/
	function removeAllHtmlInsideDiv() {
		$(".example_1").html( $(".example_1").text() );
	};
	removeAllHtmlInsideDiv();

Result

1 2 3 4 5 6 7 8 9 10

 

Example 2: Remove some html links while keeping the text.

What if we needed to remove only some links while keeping others, we now need to iterate through the collection of my_target_link objects. Since we’re dealing with more than one object, we’ll use the jQuery.each() function to filter the content. Then, for each one of the objects, we strip the html links just like we did in the previous example.

( The DIV for this example has the class ‘example_2′ assigned to it )

	/*	Example 2 	*/	
	function filterLinks() {
		$(".example_2 .my_target_link a").each(function() {
			$($(this).parent()).html($(this).text());
		});
	};
	filterLinks();

Result

1 2 3 4 5 6 7 8 9 10

If you have some tips and tricks concerning this kind of task, or comments about my code and how to improve it, you are welcomed to post them below in the comments section.


Share it!

9 thoughts on “Strip html tags with jQuery

  1. You are a life saver. Your Example 2 was just what I was looking for. Way beyond my jQuery and JavaScript knowledge at this point.

    Worked like a charm for me.

  2. Is it just me or are the links still in there in your examples? Not sure if it they were gone at some point but all the numbers still seemed to be linked. And when I tried the function I experienced the same problem, no tag stripping. Am I missing something? Thanks!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>