Skip to main content

Converting HTML special characters to its equivalent HTML Entity


Here we will see how to convert the HTML text to its equivalent entity. Sometime we come across a situation where we wish to show the content of inner HTML of some specified element for viewing or debugging purpose. I tried to write a code for the conversion. Here is code and its usage:

function convertToHTMLEntity(html){
 var textNode = document.createTextNode(html);
 var divElement = document.createElement('div');
 divElement.appendChild(textNode);
 return divElement.innerHTML;
}
console.log(convertToHTMLEntity('<p> Hello! </p>'));
Output:




Comments

Popular posts from this blog

$parsers and $formatters in Angularjs

$parsers and $formatters are array of function defined on ngModelController . When there is change in values (view or model), the value is passed through the $parsers or $formatters pipeline to convert it according to the needs. $parsers (View to Model): $parsers is an array of function which executes when there is change in view  value ( $veiwValue ), usually via user input. $parsers cause the conversion of view value into the form desirable to assign in model value. The value is passed through each $parsers function and the return value of one function is passed to next function. Last return value is passed to $validators and after validation the value is assigned to model. These $parsers functions are called array order (i.e. index 0 to n). $parsers are not called when there is change in model value programmatically. $parsers function must return some value. If it not, causes parse error and model value is set to undefined . Let's see the simple ...

Automatic Slashing the Date Input using Angularjs

We define a directive that will automatically slash the input field as user typein the date. The directive have following capabiltiy: The directive will append slash '/' when input field has 2 or 5 characters. The input will accept only 10 characters (dd/mm/yyyy). Validity of date provide will not be checked. When the backspace is pressed it will remove the last two character if last character is slash. Otherwise it will remove last character from the input field. The input will not accept characters other than numbers (0 to 9). Let's jump into the code. We will use bootstrap for awesome look: HTML Code: <div class="container" ng-app="myApp" ng-controller="myAppCtrl"> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <form class="form-horizontal"> <h4 class="bg-primary">Auto Slashing Date using Angularjs Directive</h4> <div class=...

Dive into ngIf directive and ngShow directive with example

ngIf and ngShow directives are used very frequently in Angular apps. Here will the difference between these two through an example. Firstly, let's see the main difference between these two as in angular docs: ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather then changing its visibility via display css property. The main points are as follows: ngShow directive uses css display property to show and hide the element in DOM. It does't remove the element from the DOM. It just set class="ng-hide" to hide the element and removes the ng-hide class to show the element. ngIf directive remove and reinsert the element based on the expression provided in ng-if directive. The inserted element has the state which was initialized at the time of compilation. If we change any css property of the element or set any class, that css property and class will be lost if the ng-if expression becomes false and...