Formatage et mise en évidence des chaînes JSON à l'aide des compétences Regular Expressions_Javascript

Les chaînes Json sont très utiles. Parfois, les informations renvoyées par certaines interfaces d'arrière-plan sont au format chaîne et ont une mauvaise lisibilité. À l'heure actuelle, il serait bien préférable qu'il existe une méthode permettant de formater et de mettre en évidence la chaîne Json. jetez un oeil à la mise en forme et à la mise en évidence d'une chaîne json complétée par une expression régulière

La première étape consiste à convertir l'entrée. S'il s'agit d'un objet, elle est convertie en une chaîne json standardisée. Si ce n'est pas un objet, la chaîne est d'abord convertie en objet (pour éviter les chaînes non standard). , puis converti à nouveau en chaîne json. Où json est l'entrée.

Copier le code Le code est le suivant :

if (typeof json !== 'string') {
json = JSON.stringify(json);
} autre {
json = JSON.parse(json);
json = JSON.stringify(json);
>

Après avoir standardisé les données, marquez la chaîne pour une segmentation et une recombinaison ultérieures

Il y a plusieurs endroits où vous devez ajouter des balises, notamment des crochets, des crochets et des virgules. J'utilise ici des sauts de ligne. n (de cette façon, l'effet sera meilleur lorsqu'il sera testé sous la ligne de commande).

Copier le code Le code est le suivant :

//Ajoute des nouvelles lignes avant et après les accolades
reg = /([{}])/g;
json = json.replace(reg, 'rn$1rn');
// Ajout de sauts de ligne avant et après les crochets
reg = /([[]])/g;
json = json.replace(reg, 'rn$1rn');
// Ajoute une nouvelle ligne après la virgule
reg = /(,)/g;
json = json.replace(reg, '$1rn');

Après avoir ajouté la marque d'achèvement, vous devez effectuer un traitement d'optimisation, supprimer les sauts de ligne supplémentaires et supprimer les sauts de ligne avant la virgule. Ceci afin d'éviter les chaînes vides lors de la segmentation et de gaspiller une boucle. Enfin, ajoutez un espace. après le côlon. Voir C'est plus joli.

Copier le code Le code est le suivant :

//Supprimer les sauts de ligne redondants
reg = /(rnrn)/g;
json = json.replace(reg, 'rn');
// Supprime la nouvelle ligne avant la virgule
reg = /rn,/g;
json = json.replace(reg, ',');
//Retrait avant deux points
reg = /:/g;
json = json.replace(reg, ': ');

L'étape suivante consiste à poursuivre le traitement de cette chaîne initialement traitée. J'ajouterai une logique à la fonction function(index, node) {} pour traiter chaque unité de segmentation, y compris l'indentation et l'embellissement du formatage.

Copier le code Le code est le suivant :

$.each(json.split('rn'), function(index, node) {});

Tout d'abord, parlons de l'indentation. La méthode d'indentation est très simple. Lorsque vous rencontrez des symboles {, [, l'indentation augmente de 1, et lorsque vous rencontrez des symboles }, ], l'indentation diminue de 1. Sinon, l'indentation diminue de 1. le montant reste inchangé.

Copier le code Le code est le suivant :

//Lorsque vous rencontrez {, [ici, le niveau d'indentation augmente de 1, lorsque vous rencontrez }, ], le niveau d'indentation diminue de 1, et lorsqu'il n'est pas rencontré, le niveau d'indentation reste inchangé
if (node.match(/{$/) || node.match(/[$/)) {
retrait = 1;
} sinon if (node.match(/}/) || node.match(/]/)) {
Si (pad !== 0) {
         pad -= 1;
>
} autre {
retrait = 0;
>

Après avoir terminé l'indentation, il est temps d'embellir le code en surbrillance. Plusieurs règles CSS sont utilisées ici. Comme vous pouvez le voir ci-dessous, lors de la mise en évidence des unités segmentées, des règles régulières sont utilisées pour juger s'il correspond aux grandes parenthèses. marquez la classe d'objet et les crochets marquent la classe du tableau, le nom de l'attribut et la valeur de l'attribut. Ajoutez ces règles CSS à la fois. Une fois l'ajout terminé, elles peuvent être assemblées.

Copier le code Le code est le suivant :

.ObjectBrace{color:#00AA00;font-weight:bold;}
.ArrayBrace{color:#0033FF;font-weight:bold;}
.PropertyName{color:#CC0000;font-weight:bold;}
.String{color:#007777;>
.Numéro{color:#AA00AA;}
.Comma{color:#000000;font-weight:bold;}

Copier le code Le code est le suivant :

//Ajouter une mise en évidence du code
node = node.replace(/([{}])/g,"$1");
node = node.replace(/([[]])/g,"$1");
node = node.replace(/(".*")(:)(.*)(,)?/g,"$1$2$3$4");
node = node.replace(/"([^"]*)"(,)?$/g,""$1"2$");
node = node.replace(/(-?d )(,)?$/g,"$1$2< /span>");

Enfin, jetons un œil au code complet de la méthode (ici j'ai utilisé la bibliothèque de classes jquery), et à l'adresse du test :

Pour embellir jsonstr, utilisez simplement APP.format(jsonstr) et envoyez-le directement dans la balise

pour voir l'effet,

Ce qui suit est une adresse de test, http://iforever.sinaapp.com/ Vous pouvez entrer et l'essayer et voir le code source complet

Copier le code Le code est le suivant :

<script><br> var APP=fonction(){<br>       var format=fonction(json){<br>             var reg=null,<br>                   result='';<br>                  pad=0,<br>                    PADDING='                                                                        If (typeof json !== 'string') {<br>                    json = JSON.stringify(json);<br>                } autre {<br>                   json = JSON.parse(json);<br>                    json = JSON.stringify(json);<br>             }<br>                                                      // Ajouter des sauts de ligne avant et après les accolades <br>             reg = /([{}])/g;<br>                json = json.replace(reg, 'rn$1rn');<br>                                                          // Ajouter des nouvelles lignes avant et après les crochets <br>             reg = /([[]])/g;<br>                json = json.replace(reg, 'rn$1rn');<br>                                                                                                                                                                                                 // Ajouter une nouvelle ligne après la virgule <br>             reg = /(,)/g;<br>                json = json.replace(reg, '$1rn');<br> // Supprime l'excédent de monnaie <br>           reg = /(rnrn)/g;<br>               json = json.replace(reg, 'rn');<br> //Supprimer la nouvelle ligne avant la virgule<br>              reg = /rn,/g;<br>                json = json.replace(reg, ',');<br> //Retrait avant deux points <br>             reg = /:/g;<br>                json = json.replace(reg, ': ');<br>                            // Divisez JSON en fonction des nouvelles lignes et traitez chaque petit morceau <br>                  $.each(json.split('rn'), function(index, node) {<br>               var i = 0,<br> retrait = 0,<br>                          padding = '';<br>                                       //Ici, lorsque {, [ est rencontré, le niveau d'indentation est augmenté de 1, lorsque }, ] est rencontré, le niveau d'indentation est réduit de 1, et lorsqu'il n'est pas rencontré, le niveau d'indentation reste inchangé <br> Si (node.match(/{$/) || node.match(/[$/)) {<br> retrait = 1;<br>                        } else if (node.match(/}/) || node.match(/]/)) {<br> Si (pad !== 0) {<br>                            pad -= 1;<br>                  }<br>                     } autre {<br> retrait = 0;<br>                ><br>                    //rembourrage保存实际的缩进<br>                 pour (i = 0; i < pad; i ) {<br>                     rembourrage = REMBOURRAGE;<br>                 ><br>                 //添加代码高亮<br>                 node = node.replace(/([{}])/g,"<span class='ObjectBrace'>$1</span>");<br>                 node = node.replace(/([[]])/g,"<span class='ArrayBrace'>$1</span>");<br>                 node = node.replace(/(".*")(:)(.*)(,)?/g,"<span class='PropertyName'>$1</span>$2$3$4"); <br>                 node = node.replace(/"([^"]*)"(,)?$/g,"<span class='String'>"$1"</span><span class='Comma '>2$</span>");<br>                 node = node.replace(/(-?d )(,)?$/g,"<span class='Number'>$1</span><span class='Comma'>$2< /span>");<br>                 résultat = nœud de remplissage '<br>';<br>                 pad = retrait;<br>             });<br>             renvoyer le résultat ;<br>         };<br>         revenir {<br>             "format":format,<br>         };<br>     }();<br> </script>

怎么样，json字符串是不是美观了很多呢，超级实用吧，这么好的东东，当然不能独享，这里推荐给小伙伴们。