Jquery: Strip all specific HTML tags from string

Question

I have a variable that contains a string of text and html tags, such as:

var temp = \"
Some text
More texthere

        

Answer 1

You could try the jquery plugin HTML Clean. In the example they provide:

$.htmlClean("<H1 class=\"header\"><P>Nested P Test</H1>", {format:true});

=> 
<h1>
        Nested P Test
</h1>

You can replace specific tags with {removeTags:[p]} and it will still render the contents just not the tag.

Answer 2

I had to do something similar: keep a block of text from containing any HTML tag other than <b>, <i> or <u>. This question and several others pointed me towards my own function:

function cleanNonFormattingTags(htmlContents) {
    if (htmlContents && htmlContents.length) {
        var result = '';
        htmlContents.each(function () {
            var $child = $(this), type = $child.prop('tagName'), isTextNode = this.nodeName == "#text";
            if (isTextNode) {
                result += this.textContent;
            }
            else if (type == 'B' || type == 'U' || type == 'I' || type == 'BR') { // Allow only these types of tags
                var innerContent = cleanNonFormattingTags($child.contents());
                var $newTag = $(document.createElement(type)).html(innerContent);
                result += $newTag[0].outerHTML;
            }
            else {
                result += cleanNonFormattingTags($child.contents());
            }
        });
        return result;
    }
    return htmlContents.text();
}

Hope this helps!

Answer 3

I'll follow up on @nbrooks because his answer is very close to what you want, but not quite. @nbrooks hit on the solution by noting that html() gives you the data that is wrapped in a tag. The solution therefore is to wrap your HTML in a tag. This should do the trick for you:

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>";
$("<span>" + temp + "</span>").find('span,p').
  contents().unwrap().end().end().html()`

See http://jsfiddle.net/18u5Ld9g/1/ for an example.

As a more general function:

function stripTags(html, tags) {
  // Tags must be given in CSS selector format
  return $("<span>" + html + "</span>").find(tags).
    contents().unwrap().end().end().html();
}

Answer 4

Demo: http://jsfiddle.net/VwTHF/1/

$('span, p').contents().unwrap();

.contents() will get the elements and text within each such tag, and .unwrap will remove the element wrapping each content section.

Based on your current approach it would look something like this:

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>";
var $temp = $(temp);
$temp.find('span, p').contents().unwrap().end().end();

If you want to continue targeting the original object, you have to use .end() to clear the filter.