How to Escape HTML entities from a given string

Escape html entities from from a given string with whitelist tags and special chars.

Introduction

 

In this blog, I am sharing code snippet to escape the HTML from the given string with whitelist tags and special characters.

 

This code snippet would help you to remove the html/script from the string excluding the whitelisted tagsand special chars so that we can avoid XSS attack.

/*
Function to escape the html with specified whitelist tags & spl chars
@param htmlString string string to be escaped
@param tags string comma separated tag list to be unescaped
@param splChars string comma separated spl char list to be unescaped
@example
    var exTags = 'b,p,strong, i';
    var exSplChars = '?,!';
    document.querySelector('#editor').innerHTML = safeHTML("<strong> Need</strong> tips? <i> Visit </i> <b> W3Schools! </b>", exTags, exSplChars);
*/
function safeHTML(htmlString, tags, splChars) {
    var exDefaults = ' , %',
        pattern = prepareTagsRegExpPattern() + '|' + prepareCharsRegExpString();

      return escape(htmlString).replace(new RegExp(pattern, 'ig'), function(match) { return unescape(match); });

  function prepareTagsRegExpPattern() {
    return (tags || '').split(',').map(function(tag, index, arr) {
        var text = '';
      tag = tag.trim();
      if(index === 0) {
        text = '%3C(' + tag + '|' + '/' + tag;
      }else if(index === arr.length -1) {
        text = tag + '|' + '/' + tag + ')%3E';
      } else    {
        text = tag + '|' + '/' + tag
      }
      return text;
  }).join('|');
  }

  function prepareCharsRegExpString() {
    return (splChars || '').split(',').map(function(char) { return escape(char); }).join('|') + '|' +
           (exDefaults || '').split(',').map(function(char) { return escape(char) }).join('|') ;
  }

}

Here is more details