After a project is updated, it cannot be built. Depressed.
Asked the boss, saying =
I read the blog http://www.cnblogs.com/sanshi.
I think cnblogs is a good blog ....
We hope csdn can continue to work.
We found HTML beauty on http://www.cnblogs.com/sanshi. I studied it myself...
Half of the research, the boss said to install a new server ....
Wait for lunch and check again ....
The Code is as follows. It is relatively simple.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> self-implemented HTML-beautify </title>
<SCRIPT src = "jquery-1.3.2.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
See <body>
</SCRIPT>
</Head>
<Body>
<H1>
Implement HTML-beautify by yourself <Textarea style = "width: 600px; Height: 300px;" id = "content">
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> </Textarea>
<Br/>
<Input type = "button" id = "format" value = "format"/>
<Br/>
<Br/>
After learning the HTML-Beautify.js, we found that the use of JavaScript to parse HTML is not mysterious, the first is to analyze characters by character, from which to extract the mark (token ), there are only two types of tags-tag and body in HTML,
Then, we analyze the syntax of these tokens, mainly the number of indentation.
<Br/>
With these basic concepts, we can implement this small program on our own today:
<PRE>
// A simple attempt on HTML beautifier
Function htmlbeautify (source, indent_value ){
This. Source = source;
This. indent_value = indent_value;
This. Result = "";
This. parse ();
}
// Analyze and generate the output to this. Result
Htmlbeautify. Prototype. parse = function (){
VaR that = this;
// The character currently analyzed, the current tag value, tag type, output array, and indentation level
VaR Pos = 0, token_value = "", token_type = "",
Output = [], indent_level = 0;
// Use these tags as single tags
VaR single_token = "Br, input, Link, Meta ,! Doctype, basefont, base, area, HR, WBR, Param, IMG, isindex ,? XML, embed ". Split (',');
// Output the current tag (line feed + indentation + tag value)
Function outputtoken (){
Output. Push ("/N ");
For (VAR I = 0; I & lt; indent_level; I ++ ){
Output. Push (that. indent_value );
}
Output. Push (token_value );
}
// Obtain the next tag (obtain the body first, and obtain the tag if the body is empty)
Function nexttoken (){
VaR token_value_array = [], val = "";
// All content before "& lt;" is used as the body label
While (val = That. source [POS])! = "& Lt ;"){
If (Pos & gt; = That. Source. Length ){
Token_type = "end ";
Return;
}
Token_value_array.push (VAL );
Pos ++;
}
Token_value = $. Trim (token_value_array.join (""));
If (token_value = ""){
// If the body tag is empty, the tag is obtained.
Nexttokentag ();
} Else {
Token_type = "content ";
}
}
Function nexttokentag (){
VaR token_value_array = [], val = "", tagname = "";
// Obtain the tag until "& gt ;"
Do {
Val = That. source [POS];
Token_value_array.push (VAL );
Pos ++;
} While (Val! = "& Gt ;");
Token_value = $. Trim (token_value_array.join (""));
// Name of the current tag (in lower case)
Tagname = gettagname ();
If (token_value [1] === "/"){
// Token_value starts with "& lt;/" and is considered as the end tag.
Token_type = "end_tag ";
} Else if (contains (tagname, single_token) | token_value [token_value.length-2] === "/"){
// If the Tag ends with "/& gt;" in single_token or token_value, it is considered as an independent tag.
// This case is not taken into consideration: "& lt; BR & gt; & lt;/BR & gt ;"
Token_type = "single_tag ";
} Else {
Token_type = "start_tag ";
}
}
Function gettagname (){
VaR tagname = token_value.substr (1, token_value.length-2 );
VaR spaceindex = tagname. indexof ("");
If (spaceindex & gt; 0 ){
Tagname = tagname. substr (0, spaceindex );
}
Return tagname. tolowercase ();
}
Function contains (Val, array ){
For (VAR I = 0; I & lt; array. length; I ++ ){
If (val = array [I]) {
Return true;
}
}
Return false;
}
// The main function of parse to obtain the next token in a loop
While (true ){
Nexttoken ();
// The current token is the end mark
If (token_type = "end "){
Break;
}
Switch (token_type ){
Case "start_tag ":
// Our indentation control is very simple. The label is scaled down to a unit.
Outputtoken ();
Indent_level ++;
Break;
Case "end_tag ":
// Reduce one unit indent before the end tag
Indent_level --;
Outputtoken ();
Break;
Case "single_tag ":
Case "content ":
Outputtoken ();
Break;
}
}
// Remove the first "/N"
This. Result = output. Join (""). substr (1 );
};
$ (Function (){
$ ("# Format"). Click (function (){
// Instantiate htmlbeau and pass the HTML fragment to be parsed and the indent string
VaR beautify = new htmlbeautify ($ ("# Content"). Val (),"");
$ ("# Content"). Val (beautify. Result );
});
});
</PRE>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
