HTML code, CSS code, JSON string online formatting, beautification tool, cssjson

Source: Internet
Author: User

HTML code, CSS code, JSON string online formatting, beautification tool, cssjson

HTML code, CSS code, JSON string online formatting, beautification Tool

Http://www.phpthinking.com/format.htm


What is the working principle of the online HTML formatting tool and the online CSS formatting tool?

The essence is to use programming languages (js, asp, php, ruby...) to judge and process strings based on a set of rules.

Before format:
<Html> <body>
After the format:
<Html>
<Body> </body>
</Html>

Here is a general principle. There are many algorithms for implementation:
Rule: start from an element in html. </> it is the end of an element to find the element.

When the program reads the first
Then you can find
If there are child elements, You need to insert a line break to separate the child elements from the parent class (processing details at the same time, such as extra spaces between parent and child labels, insert tab indentation, etc)

Then I went to the <body> </body> to find out if there were any pairs <> </>. If not, I did not process them. If yes, I would search and process them in the same loop as the previous steps.

------------------------------------------------------

General css formatting rules:

Body {color: red;}. myclass {font-size: 12px;} # myid span {width: 100px; color: yellow ;}

Find the matched {}, which is the rule line according to; for the ending rule:
{
Width: 100px;
Color: yellow; (this ";" can be skipped In the last sentence, so you should also consider this situation)
}

Add tab indentation:
{
Width: 100px;
Color: yellow;
}

The other is to judge the characters outside a pair of {...} and add the line feed:

Body {}
. Myclass {}
# Myid span {}

The last thing you see is:

Body {
Color: red;
}
. Myclass {
Font-size: 12px;
}
# Myid span {
Width: 100px;
Color: yellow;
}

In specific implementation, there are still many situations to consider. For example, the person who writes the code forgets to write
This is also the principle of formatting other things, but the search rules are different.
In turn, there are a lot of JavaScript, css, and html code compressed to reduce the server load by byte, and delete useless spaces and line breaks in the file, that is, to reverse these steps.

In addition, you can use Baidu to process strings: Regular Expressions... the remaining full text>

Which of the following is an online JSON format verification tool? It is best to include a JSON view.

I recommend www.bejson.com to meet your requirements.

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.