Use JavaScript to implement htmlencode and htmldecode

Source: Internet
Author: User
Tags html encode
The encode and decode of HTML can be easily implemented on the server side. For example, for Asp.net, it is easy to call the ready-made function system. Web. httpcontext. server. htmlencode or htmldecode. However, with the development of Ajax, people are paying more and more attention to JavaScript or VBScript programming, which makes it necessary to use these scripting languages to solve some problems that have never been solved for a long time, the HTML encode/decode is an example. JavaScript does not seem to have ready-made functions. Code There are also few. The main idea is to replace (replace) "<", ">", "&" and other symbols with regular expressions, in fact, there is a clever way to solve this problem, please refer to the following two functions

<SCRIPT type = "text/JavaScript">
Function htmlencode (STR ){
VaR DIV = Document. createelement ("Div ");
VaR text = Document. createtextnode (STR );
Div. appendchild (text );
Return Div. innerhtml;
}
Function htmldecode (STR ){
VaR DIV = Document. createelement ("Div ");
Div. innerhtml = STR;
Return Div. innerhtml;
}
</SCRIPT>

The function name is the same as the function name. htmlencode enables document. createtextnode converts the HTML code into text, while htmldecode enables the browser to automatically adjust the code of the text (encoded HTML) by setting innerhtml Of The DIV, and then restores the code to HTML, this enables encoding/decoding. This method has been successfully tested on IE Firefox opera, and other browsers should not have much problems.

 

 

Not verified

Method 1:

Use a browser internal converter to implement conversion by dynamically creating a container tag element, such as Div. Set the string to be converted to the innertext of the element, and then return the innerhtml of the element, the HTML-encoded string is obtained.

Function htmlencode (input)
{
VaR converter = Document. createelement ("Div ");
Converter. innertext = input;
VaR output = converter. innerhtml;
Converter = NULL;
Return output;
}

Of course, you can also use the same method to decode the htmldecode of the string, however, a problem is that non-null characters that follow the character "<" cannot be displayed together with the character "<. Of course, the corresponding processing of the string can solve this problem. For example, add a space after the character "<" and then remove it After decoding. After all, to use the htmldecode decoding method, the character string has been encoded by the htmlencode method, and the character string after htmlencode encoding cannot have the character "<.

Function htmldecode (input)
{
VaR converter = Document. createelement ("Div ");
Converter. innerhtml = input;
VaR output = converter. innertext;
Converter = NULL;
Return output;
}

Method 2:

<Script language = Javascript >
Function htmlencode (STR)
{
VaR S = "";
If (Str. Length = 0) Return "";
S = Str. Replace (/&/g, "& gt ;");
S = S. Replace (/</g, "& lt ;");
S = S. Replace (/>/g, "& gt ;");
S = S. Replace (// G, "& nbsp ;");
S = S. Replace (/\ '/g ,"'");
S = S. Replace (/\ "/g," & quot ;");
S = S. Replace (/\ n/g, "<br> ");
Return S;
}
Function htmldecode (STR)
{
VaR S = "";
If (Str. Length = 0) Return "";
S = Str. Replace (/& gt;/g ,"&");
S = S. Replace (/& lt;/g, "<");
S = S. Replace (/& gt;/g, "> ");
S = S. Replace (/& nbsp;/g ,"");
S = S. Replace (/'/g ,"\'");
S = S. Replace (/& quot;/g ,"\"");
S = S. Replace (/<br>/g, "\ n ");
Return S;
}
</SCRIPT>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.