Highlighted
Micro Focus Expert
Micro Focus Expert
225 views

(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%20%26%20Test&verify=It%20works%20!%20%26%23%3F%20fine

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["™"]="&#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["©"]="&copy;";

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

charmap["«"]="«";

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

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

charmap["®"]="&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;/.,|%^

Labels (1)
0 Likes
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.