Example analysis of javascript alternative methods to implement htmlencode() and htmldecode() functions

The example in this article describes the alternative method of JavaScript to implement the htmlencode() and htmldecode() functions. Share it with everyone for your reference. The details are as follows:

The most common method is to use regular expression replacement to replace special characters such as < > &. It is easier to replace like this when htmlencoding, but send it here It may not be easy to use when decoding html, because there are many situations that need to be reversed. In addition to the common <>&, there are also dozens of character entities such as ©"®, as well as AB Chinese or Chinese and so on. It is difficult to enumerate all the escapes of Unicode encoded decimal or hexadecimal representation of characters. Replacing them one by one is not only lengthy and inefficient, but also easy to miss some characters.

The code is as follows:

function htmlencode(s){
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(s));
  return div.innerHTML;
}
function htmldecode(s){
  var div = document.createElement('div');
  div.innerHTML = s;
  return div.innerText || div.textContent;
}

Quite. Simple!

The encoding principle is to create a TextNode node, attach it to the container, and then get the innerHTML of the container.

The decoding principle is to assign the string to the innerHTML of the container, and then get the innerText or textContent.

Test it:

//测试
document.onclick = function (){
  //<p> & </p>
  alert(htmlencode(&#39;<p> & </p>&#39;));
  //<p> & © ABC 中文 中文 </p>
  alert(htmldecode(&#39;<p> & © ABC 中文 中文 </p>&#39;));
}

The effect is good.

htmldecode has requirements for input parameters. If the input parameters are not legal encoded results, the expected results may not be obtained.

I searched on google and found an article with the same idea as mine on cnblogs. , it turns out that someone else has thought this way =||=, but his htmldecode code is wrong

.