Formatieren und Hervorheben von JSON-Strings mithilfe von regulären Ausdrücken_Javascript-Kenntnissen

Json-Strings sind manchmal sehr nützlich, da die von einigen Hintergrundschnittstellen zurückgegebenen Informationen schlecht lesbar sind. Zu diesem Zeitpunkt wäre es viel besser, wenn es eine Methode gäbe, die den JSON-String formatieren und hervorheben könnte Schauen Sie sich die Formatierung und Hervorhebung eines JSON-Strings an, der durch einen regulären Ausdruck ergänzt wird

Der erste Schritt besteht darin, die Eingabe zu konvertieren. Wenn es sich um ein Objekt handelt, wird es in eine standardisierte JSON-Zeichenfolge umgewandelt. Wenn es sich nicht um ein Objekt handelt, wird die Zeichenfolge zunächst in ein Objekt umgewandelt (um nicht standardmäßige Zeichenfolgen zu verhindern). und dann erneut in einen JSON-String konvertiert. Wobei json die Eingabe ist.

Code kopieren Der Code lautet wie folgt:

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

Markieren Sie nach der Standardisierung der Daten die Zeichenfolge für die anschließende Segmentierung und Neukombination

Es gibt mehrere Stellen, an denen Sie Tags hinzufügen müssen, darunter Klammern, Klammern und Kommas. Ich verwende hier Zeilenumbrüche. n (auf diese Weise sieht der Effekt besser aus, wenn er unter der Befehlszeile getestet wird).

Code kopieren Der Code lautet wie folgt:

//Zeile vor und nach den geschweiften Klammern hinzufügen
reg = /([{}])/g;
json = json.replace(reg, 'rn$1rn');
// Zeilenumbrüche vor und nach den eckigen Klammern hinzufügen
reg = /([[]])/g;
json = json.replace(reg, 'rn$1rn');
// Nach dem Komma
eine neue Zeile hinzufügen reg = /(,)/g;
json = json.replace(reg, '$1rn');

Nachdem Sie die Abschlussmarkierung hinzugefügt haben, müssen Sie eine Optimierung durchführen, die zusätzlichen Zeilenumbrüche entfernen und die Zeilenumbrüche vor dem Komma entfernen. Dies dient dazu, leere Zeichenfolgen während der Segmentierung zu vermeiden und eine Schleife hinzuzufügen nach dem Doppelpunkt. Siehe Sieht hübscher aus.

Code kopieren Der Code lautet wie folgt:

//Redundante Zeilenumbrüche entfernen
reg = /(rnrn)/g;
json = json.replace(reg, 'rn');
// Entfernen Sie die neue Zeile vor dem Komma
reg = /rn,/g;
json = json.replace(reg, ',');
//Einzug vor dem Doppelpunkt
reg = /:/g;
json = json.replace(reg, ': ');

Der nächste Schritt besteht darin, diese ursprünglich verarbeitete Zeichenfolge weiter zu verarbeiten. Ich werde der Funktion function(index, node) {} Logik hinzufügen, um jede Segmentierungseinheit zu verarbeiten, einschließlich Einrückung und verschönernder Formatierung.

Code kopieren Der Code lautet wie folgt:

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

Lassen Sie uns zunächst über die Einrückungsmethode sprechen. Wenn Sie auf die Symbole {, [] stoßen, wird die Einrückung um 1 verringert, wenn Sie auf die Symbole }, ] stoßen Der Betrag bleibt unverändert.

Code kopieren Der Code lautet wie folgt:

//Bei Begegnung mit {, [hier erhöht sich die Einrückungsstufe um 1, bei Begegnung mit },] verringert sich die Einrückungsstufe um 1, und wenn sie nicht angetroffen wird, bleibt die Einrückungsstufe unverändert
if (node.match(/{$/) || node.match(/[$/)) {
Einzug = 1;
} else if (node.match(/}/) || node.match(/]/)) {
If (pad !== 0) {
         pad -= 1;
}
} sonst {
Einzug = 0;
}

Nach Abschluss der Einrückung ist es an der Zeit, den hervorgehobenen Code zu verschönern. Wie Sie unten sehen können, werden beim Hervorheben der segmentierten Einheiten regelmäßige Regeln verwendet, um zu beurteilen, ob er mit den großen Klammern übereinstimmt Markieren Sie die Objektklasse und die eckigen Klammern markieren die Array-Klasse, den Attributnamen und den Attributwert. Nachdem das Hinzufügen abgeschlossen ist, können sie zusammengefügt werden.

Code kopieren Der Code lautet wie folgt:

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

Code kopieren Der Code lautet wie folgt:

//Code-Hervorhebung hinzufügen
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>");

Schauen wir uns zum Schluss den vollständigen Methodencode (hier habe ich die jquery-Klassenbibliothek verwendet) und die Testadresse an:

Um jsonstr zu verschönern, verwenden Sie einfach APP.format(jsonstr) und geben Sie es direkt an das

-Tag aus, um den Effekt zu sehen,

Das Folgende ist eine Testadresse: http://iforever.sinaapp.com/ Sie können hineingehen und es ausprobieren und den vollständigen Quellcode sehen

Code kopieren Der Code lautet wie folgt:

<script><br> var APP=function(){<br>       var format=function(json){<br>             var reg=null,<br>                    result='';<br>                   pad=0,<br>                    PADDING='                                                                   If (typeof json !== 'string') {<br>                   json = JSON.stringify(json);<br>               } sonst {<br>                   json = JSON.parse(json);<br>                   json = JSON.stringify(json);<br>             }<br>                                        // Zeilenumbrüche vor und nach den geschweiften Klammern hinzufügen <br>             reg = /([{}])/g;<br>                json = json.replace(reg, 'rn$1rn');<br>                                                          // Fügen Sie vor und nach den eckigen Klammern Zeilenumbrüche ein <br>             reg = /([[]])/g;<br>                json = json.replace(reg, 'rn$1rn');<br>                                                                                                  // Fügen Sie eine neue Zeile hinzu nach dem Komma <br>             reg = /(,)/g;<br>               json = json.replace(reg, '$1rn');<br> // Überschüssiges Wechselgeld entfernen <br>           reg = /(rnrn)/g;<br>               json = json.replace(reg, 'rn');<br> //Entferne die neue Zeile vor dem Komma<br>              reg = /rn,/g;<br>                json = json.replace(reg, ',');<br> //Einzug vor dem Doppelpunkt <br>             reg = /:/g;<br>                json = json.replace(reg, ': ');<br>                            // JSON nach Zeilenumbrüchen aufteilen und jedes kleine Stück verarbeiten <br>                  $.each(json.split('rn'), function(index, node) {<br>               var i = 0,<br> Einzug = 0,<br>                          padding = '';<br>     { If (node.match(/{$/) || node.match(/[$/)) {<br> Einzug = 1;<br>                         } else if (node.match(/}/) || node.match(/]/)) {<br> If (pad !== 0) {<br>                            pad -= 1;<br>                  }<br>                     } sonst {<br> Einzug = 0;<br>                }<br>                    //padding保存实际的缩进<br>                 für (i = 0; i < pad; i ) {<br>                     padding = PADDING;<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>                 Ergebnis = Füllknoten '<br>';<br>                 pad = indent;<br>             });<br>             Ergebnis zurückgeben;<br>         };<br>         zurück {<br>             "format":format,<br>         };<br>     }();<br> </script>

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