Javascript allow only specific HTML tags

Question

I have a long HTML string, and I would like to parse it to allow only certain html tags to pass through.

The allowed tags are bold, italics, underline, paragraph, ordered list, and unordered list.

These tags and their corresponding text should be returned. All other tags should be removed, and only the innerHTML should be left for those.

For the following inputs, the outputs should be as such:

Input: <p>There is some <u>text</u> here</p> Output: <p>There is some <u>text</u> here</p>

Input: <span style="color: rgb(34, 34, 34); font-family: arial; font-size: small;">text here</span> Output: text here

Input: <div>Combo of <b>allowed</b> tag and <i>disallowed</i> tag</div> Output: Combo of <b>allowed</b> tag and <i>disallowed</i> tag

I have looked at this similar question: Regex to allow only set of HTML Tags and Attributes. But, I was wondering how you would do it in Javascript? I am currently iterating through the html and doing a search for the allowed tags like this:

var htmlString = "<p>There is some <u>text</u> here</p>";
var allowedTags = ["<b>", "<i>", "<u>", "<p>", "<ol>", "<ul>"];
for (i = 0, len = allowedTags.length; i < len; i++) {
    var ind = htmlString.indexOf(allowedTags[i]);
}

But this doesn't work, especially if you have multiple html tags in a string. Much appreciation for your help!

Answer 1

It looks like you want to emulate php in javascript.
You could try phpjs.org function strip_tags see here

function strip_tags(input, allowed) {
//  discuss at: http://phpjs.org/functions/strip_tags/
// original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// improved by: Luke Godfrey
// improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
//    input by: Pul
//    input by: Alex
//    input by: Marc Palau
//    input by: Brett Zamir (http://brett-zamir.me)
//    input by: Bobby Drake
//    input by: Evertjan Garretsen
// bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// bugfixed by: Onno Marsman
// bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// bugfixed by: Eric Nagel
// bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// bugfixed by: Tomasz Wesolowski
//  revised by: Rafał Kukawski (http://blog.kukawski.pl/)
//   example 1: strip_tags('<p>Kevin</p> <br /><b>van</b> <i>Zonneveld</i>', '<i><b>');
//   returns 1: 'Kevin <b>van</b> <i>Zonneveld</i>'
//   example 2: strip_tags('<p>Kevin <img src="someimage.png" onmouseover="someFunction()">van <i>Zonneveld</i></p>', '<p>');
//   returns 2: '<p>Kevin van Zonneveld</p>'
//   example 3: strip_tags("<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>", "<a>");
//   returns 3: "<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>"
//   example 4: strip_tags('1 < 5 5 > 1');
//   returns 4: '1 < 5 5 > 1'
//   example 5: strip_tags('1 <br/> 1');
//   returns 5: '1  1'
//   example 6: strip_tags('1 <br/> 1', '<br>');
//   returns 6: '1 <br/> 1'
//   example 7: strip_tags('1 <br/> 1', '<br><br/>');
//   returns 7: '1 <br/> 1'

allowed = (((allowed || '') + '')
.toLowerCase()
.match(/<[a-z][a-z0-9]*>/g) || [])
.join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
return input.replace(commentsAndPhpTags, '')
.replace(tags, function($0, $1) {
  return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
});
}

just use it like this :

var str = strip_tags(
   '<p>There is some <u>text</u> here</p>',
   '<b><i><u><p><ol><ul>' // Allowed tags
);