How to convert special characters to HTML in Javascript?

In HTML there are many cases in which the browser gets confused while rendering the page. In HTML the less-than sign ( < ) means the opening of some tag and if we place an element an after it like ‘a’ or ‘h’ then browser identifies them as an anchor and heading tab respectively. Similar is the case with some special character including less than, at the rate (@), front and backslash, etc.

Example of Problem: This example is an illustration of the problem caused when the HTML text is not converted to the special format.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
    <head>
    </head>
    <body>
        <div>
        If b<a and a<h then b<h. 
<!-- the browser understands it as anchor tag--> 
       </div>
    </body>
</html>

chevron_right


The part b<a is problematic. The browser understands it as anchor tags. Similar is the case with b<h
Output:



If b

Solution 1: One way to solve it is to manually by putting special symbols in the pace of the respective special character which is problematic. But for very heavy websites it is very difficult to draw all the characters and then render it in HTML.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
</head>
  
<body>
    <div>
        If b
        < a and ab < h then b < h. 
      <!-- the browser understands it as less than-->
    </div>
</body>
  
</html>

chevron_right


Output:

If b < a and ab < h then b < h.

JavaScript based Solution One another way is to convert each special character to its respective HTML code using javascript. Within the script we will replace all the special charters with the help of a regular expression which is “&#” + ASCII value of character + “;”. We apply the same rule with all the text on the page.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <script>
        function Encode(string) {
            var i = string.length,
                a = [];
  
            while (i--) {
                var iC = string[i].charCodeAt();
                if (iC < 65 || iC > 127 || (iC > 90 && iC < 97)) {
                    a[i] = '&#' + iC + ';';
                } else {
                    a[i] = string[i];
                }
            }
            return a.join('');
        }
    </script>
</head>
  
<body>
    <script>
        document.write(Encode("If b<a and a<h then b<h"));
    </script>
</body>
  
</html>

chevron_right


Output:

If b<a and a<h then b<h


My Personal Notes arrow_drop_up

Im a final year MCA student at Panjab University, Chandigarh, one of the most prestigious university of India I am skilled in various aspects related to Web Development and AI I have worked as a freelancer at upwork and thus have knowledge on various aspects related to NLP, image processing and web

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.