Use regular expressions to format and highlight json strings.

Use regular expressions to format and highlight json strings.

Json strings are very useful. Sometimes the information returned by some background interfaces is in string format, which is quite readable. In this case, it would be much better to have a method that can be formatted and highlighted to display json strings, next let's take a look at the formatting and highlighting of json strings completed by a regular expression.

The first is to convert the input. If it is an object, it is converted to a standard json string. If it is not an object, it is first converted to an object (to prevent nonstandard strings ), then convert it to a json string. Json is the input.

Copy codeThe Code is as follows:
If (typeof json! = 'String '){
Json = JSON. stringify (json );
} Else {
Json = JSON. parse (json );
Json = JSON. stringify (json );
}

Mark the string after the canonicalized data.

There are several places to add tags, including braces, Parentheses, and commas, here I use the newline \ r \ n (in this way, the test time in the command line will look better ).

Copy codeThe Code is as follows:
// Add a line feed before and after braces
Reg =/([\ {\}])/g;
Json = json. replace (reg, '\ r \ n $1 \ r \ n ');
// Add a line feed before and after parentheses
Reg =/([\ [\])/g;
Json = json. replace (reg, '\ r \ n $1 \ r \ n ');
// Add a line feed after a comma
Reg =/(\,)/g;
Json = json. replace (reg, '$1 \ r \ n ');

After adding a tag, We need to optimize it to remove unnecessary line breaks and line breaks before commas. This is done to avoid wasting loop processing when splitting empty strings, add a space after the colon to make it look more beautiful.

Copy codeThe Code is as follows:
// Remove unnecessary line breaks
Reg =/(\ r \ n)/g;
Json = json. replace (reg, '\ r \ n ');
// Remove the line break before the comma
Reg =/\ r \ n \,/g;
Json = json. replace (reg ,',');
// Indent before the colon
Reg =/\:/g;
Json = json. replace (reg ,':');

The next step is to further process the initially processed string. I will add the logic to the function (index, node) {} to process each Split unit, including indent and beautification formats.

Copy codeThe Code is as follows:
$. Each (json. split ('\ r \ n'), function (index, node ){});

First, let's talk about indentation. The indentation method is very simple. The indentation increases by 1 when the {or [symbol is used, and the indentation decreases by 1 when the} or] symbol is used. Otherwise, the indentation remains unchanged.

Copy codeThe Code is as follows:
// Here {, [the indentation level is increased by 1,}, and], the indentation level is reduced by 1, and the indentation level remains unchanged when not met
If (node. match (/\ {$/) | node. match (/\ [$ /)){
Indent = 1;
} Else if (node. match (/\}/) | node. match (/\]/) {
If (pad! = 0 ){
Pad-= 1;
}
} Else {
Indent = 0;
}

After the indentation is completed, you should beautify the highlighted code. here you need to use several css rules. We can see that regular expressions are used to judge when the Split unit is highlighted, if the matching braces are marked as the object class, the brackets are marked as the array class, the attribute name, and the attribute value, add these css rules at one time, and splice them after adding them.

Copy codeThe Code is as follows:
. ObjectBrace {color: #00AA00; font-weight: bold ;}
. ArrayBrace {color: # 0033FF; font-weight: bold ;}
. PropertyName {color: # CC0000; font-weight: bold ;}
. String {color: #007777 ;}
. Number {color: # AA00AA ;}
. Comma {color: #000000; font-weight: bold ;}

Copy codeThe Code is as follows:
// Add code highlighting
Node = node. replace (/([\{\}])/g, "<span class = 'objectbracs'> $1 </span> ");
Node = node. replace (/([\ [\])/g, "<span class = 'arraybracs'> $1 </span> ");
Node = node. replace (/(\".*\")(\:)(.*)(\,)? /G, "<span class = 'propertyname'> $1 </span> $2 $3 $4 ");
Node = node. replace (/\ "([^"] *) \ "(\,)? $/G, "<span class = 'string'> \" $1 \ "</span> <span class = 'comm'> $2 </span> ");
Node = node. replace (/(-? \ D + )(\,)? $/G, "<span class = 'number'> $1 </span> <span class = 'comm'> $2 </span> ");

Finally, let's take a look at the complete method code (here I use the jquery Class Library) and the test address:

To beautify jsonstr, you can use APP. format (jsonstr) and directly output it to the <pre> </pre> label to see the effect,

Below is a test address, http://iforever.sinaapp.com/can go in and try it, look at the complete source code

Copy codeThe Code is as follows:
<Script>
Var APP = function (){
Var format = function (json ){
Var reg = null,
Result = '';
Pad = 0,
PADDING = '';
If (typeof json! = 'String '){
Json = JSON. stringify (json );
} Else {
Json = JSON. parse (json );
Json = JSON. stringify (json );
}
// Add a line feed before and after braces
Reg =/([\ {\}])/g;
Json = json. replace (reg, '\ r \ n $1 \ r \ n ');
// Add a line feed before and after parentheses
Reg =/([\ [\])/g;
Json = json. replace (reg, '\ r \ n $1 \ r \ n ');
// Add a line feed after a comma
Reg =/(\,)/g;
Json = json. replace (reg, '$1 \ r \ n ');
// Remove unnecessary line breaks
Reg =/(\ r \ n)/g;
Json = json. replace (reg, '\ r \ n ');
// Remove the line break before the comma
Reg =/\ r \ n \,/g;
Json = json. replace (reg ,',');
// Indent before the colon
Reg =/\:/g;
Json = json. replace (reg ,':');
// Split json according to the line feed and process each small block
$. Each (json. split ('\ r \ n'), function (index, node ){
Var I = 0,
Indent = 0,
Padding = '';
// Here {, [the indentation level is increased by 1,}, and], the indentation level is reduced by 1, and the indentation level remains unchanged when not met
If (node. match (/\ {$/) | node. match (/\ [$ /)){
Indent = 1;
} Else if (node. match (/\}/) | node. match (/\]/) {
If (pad! = 0 ){
Pad-= 1;
}
} Else {
Indent = 0;
}
// Padding stores the actual indentation
For (I = 0; I <pad; I ++ ){
Padding + = PADDING;
}
// Add code highlighting
Node = node. replace (/([\{\}])/g, "<span class = 'objectbracs'> $1 </span> ");
Node = node. replace (/([\ [\])/g, "<span class = 'arraybracs'> $1 </span> ");
Node = node. replace (/(\".*\")(\:)(.*)(\,)? /G, "<span class = 'propertyname'> $1 </span> $2 $3 $4 ");
Node = node. replace (/\ "([^"] *) \ "(\,)? $/G, "<span class = 'string'> \" $1 \ "</span> <span class = 'comm'> $2 </span> ");
Node = node. replace (/(-? \ D + )(\,)? $/G, "<span class = 'number'> $1 </span> <span class = 'comm'> $2 </span> ");
Result + = padding + node + '<br> ';
Pad + = indent;
});
Return result;
};
Return {
"Format": format,
};
}();
</Script>

How about whether the json string is beautiful? It is super practical. Of course, such a good stuff cannot be exclusive. We recommend it to our friends here.