(SM) Support Tip: Working with URLs and HTML in JavaScript strings

 

Working with URLs and HTML in JavaScript strings

 

Sometimes it is required to construct a URL or build a HTML document dynamically by JavaScript code. Unfortunately, there are characters that may not be used in URL and HTML and need to be escaped.

 

URL encoding:

JavaScript provides functions to encode a string to valid URL format.

var url = "http://a.b.c/test.jsp?"

 

var paraname1 = "test"

var paraval1 = "Build & Test";

 

var paraname2 = "verify"

var paraval2 = "It works ! &#? fine";

 

print( url paraname1 "=" encodeURIComponent(paraval1) "&" paraname2 "=" encodeURIComponent(paraval2));

Execute it and it’ll print this message:

http://a.b.c/test.jsp?test=Build & Test&verify=It works ! &#? fine

Note:    There is the escape() function in JavaScript as well. However, it was deprecated in JavaScript 1.5, and encodeURI() or encodeURIComponent() should be used instead.

 

HTML encoding

Unfortunately, JavaScript has no in-built function to escape characters inside a string for HTML. There are frameworks like JQuery that support such functions.

Many ServiceManager internal JavaScript implementations use the framework Underscore: You will find ScriptLibrary records with name#“Underscore”.

“Underscore_string” now contains two methods escapeHTML() and unescapeHTML() that can be used. These know the following characters for escaping:

var escapeChars = {

   lt: '<',

   gt: '>',

   quot: '"',

   apos: "'",

   amp: '&'

};

 

As this is an implementation in a framework with a large community, and therefore the preferred choice.

There are special characters, however, that should be escaped in HTML, that do not appear in this list. To my best knowledge, the implementation below will escape even these special characters.

var charmap = {};

InitCharmap();

 

function InitCharmap()

{

charmap["Tm"]="&#8482";

charmap["€"]="&euro;";

charmap[""]="&nbsp;";

charmap["\""]="&quot;";

charmap["&"]="&amp;";

charmap["<"]="&lt;";

charmap[">"]="&gt;";

charmap["¡"]="&iexcl;";

charmap["¢"]="&cent;";

charmap["£"]="&pound;";

charmap["¤"]="&curren;";

charmap["¥"]="&yen;";

charmap["¦"]="&brvbar;";

charmap["§"]="&sect;";

charmap["¨"]="&uml;";

charmap["Copyright"]="&copy;";

charmap["ª"]="&ordf;";

charmap["«"]="«";

charmap["¬"]="&not;";

charmap["­"]="&shy;";

charmap["Registered"]="&reg;";

charmap["¯"]="&macr;";

charmap["°"]="&deg;";

charmap["±"]="&plusmn;";

charmap["²"]="&sup2;";

charmap["³"]="&sup3;";

charmap["´"]="&acute;";

charmap["µ"]="&micro;";

charmap["¶"]="&para;";

charmap["·"]="&middot;";

charmap["¸"]="&cedil;";

charmap["¹"]="&sup1;";

charmap["º"]="&ordm;";

charmap["»"]="&raquo;";

charmap["¼"]="&frac14;";

charmap["½"]="&frac12;";

charmap["¾"]="&frac34;";

charmap["¿"]="&iquest;";

charmap["À"]="&Agrave;";

charmap["Á"]="&Aacute;";

charmap["Â"]="&Acirc;";

charmap["Ã"]="&Atilde;";

charmap["Ä"]="&Auml;";

charmap["Å"]="&Aring;";

charmap["Æ"]="&AElig;";

charmap["Ç"]="&Ccedil;";

charmap["È"]="&Egrave;";

charmap["É"]="&Eacute;";

charmap["Ê"]="&Ecirc;";

charmap["Ë"]="&Euml;";

charmap["Ì"]="&Igrave;";

charmap["Í"]="&Iacute;";

charmap["Î"]="&Icirc;";

charmap["Ï"]="&Iuml;";

charmap["Ð"]="&ETH;";

charmap["Ñ"]="&Ntilde;";

charmap["Ò"]="&Ograve;";

charmap["Ó"]="&Oacute;";

charmap["Ô"]="&Ocirc;";

charmap["Õ"]="&Otilde;";

charmap["Ö"]="&Ouml;";

charmap["×"]="&times;";

charmap["Ø"]="&Oslash;";

charmap["Ù"]="&Ugrave;";

charmap["Ú"]="&Uacute;";

charmap["Û"]="&Ucirc;";

charmap["Ü"]="&Uuml;";

charmap["Ý"]="&Yacute;";

charmap["Þ"]="&THORN;";

charmap["ß"]="&szlig;";

charmap["à"]="&agrave;";

charmap["á"]="&aacute;";

charmap["â"]="&acirc;";

charmap["ã"]="&atilde;";

charmap["ä"]="&auml;";

charmap["å"]="&aring;";

charmap["æ"]="&aelig;";

charmap["ç"]="&ccedil;";

charmap["è"]="&egrave;";

charmap["é"]="&eacute;";

charmap["ê"]="&ecirc;";

charmap["ë"]="&euml;";

charmap["ì"]="&igrave;";

charmap["í"]="&iacute;";

charmap["î"]="&icirc;";

charmap["ï"]="&iuml;";

charmap["ð"]="&eth;";

charmap["ñ"]="&ntilde;";

charmap["ò"]="&ograve;";

charmap["ó"]="&oacute;";

charmap["ô"]="&ocirc;";

charmap["õ"]="&otilde;";

charmap["ö"]="&ouml;";

charmap["÷"]="&divide;";

charmap["ø"]="&oslash;";

charmap["ù"]="&ugrave;";

charmap["ú"]="&uacute;";

charmap["û"]="&ucirc;";

charmap["ü"]="&uuml;";

charmap["ý"]="&yacute;";

charmap["þ"]="&thorn;";

charmap["^"]="&#94;";

}

 

function replaceForHTML(s)

{

if (s == null) return "";

 

   var result = "";

   for(var i=0;i<s.length; i )

   {

     var c = s.charAt(i);

     if (charmap[c] != null) result = charmap[c];

     else result = c;

   }

   return result;

}

 

 

var _ = lib.Underscore.require();

 

 

print( "HTML escape by Underscore: " _.escapeHTML("`¬!\"£$&*()_ -=}{][~@:#';?></.,|\%^") );

print( "HTML escape by replaceForHTML: " replaceForHTML("`¬!\"£$&*()_ -=}{][~@:#';?></.,|\%^") );

 

Execute to let it print the test messages:

HTML escape by replaceForHTML: `&not;!&quot;&pound;$&amp;*()_ -=}{][~@:#';?&gt;&lt;/.,|%&#94;

HTML escape by Underscore: `¬!&quot;£$&amp;*()_ -=}{][~@:#&apos;;?&gt;&lt;/.,|%^

Tags: