Verwenden von DOM-Operationen zum Ersetzen regulärer Ausdrücke in jQuery_jquery

In der heutigen Welt, in der B/S-Struktur-Clients immer „fetter“ werden, werden Sie als Full-End-Programmierer wahrscheinlich HTML-Strings am Frontend bedienen. Beachten Sie, dass Sie HTML-Strings bedienen, nicht das aktuelle Seite.

Beispielsweise kann Ueditor, ein von Baidu eingeführter Online-HTML-Rich-Text-Editor, Rich-Text-Dokumente online erstellen und seine Funktionen sind mit einer optimierten Version von Microsoft Word vergleichbar. Obwohl Ueditor die Aura von Baidu hat, ist der tatsächliche Effekt nicht sehr zufriedenstellend. Wir müssen die generierte HTML-Zeichenfolge zweimal verarbeiten, z. B. die Breite aller Bilder auf 90 % festlegen.

Durch eine bestimmte Methode können wir die HTML-Zeichenfolge im Texteditor abrufen. Angenommen, die Zeichenfolge lautet wie folgt:

Blumenartiges Sao Nian

Geheimnisvolle Pyramide

Ein traumhaftes Leben

Aber was tun als nächstes? Die elegante Verarbeitung von Strings macht es uns leicht, an reguläre Ausdrücke zu denken. Können wir hier reguläre Ausdrücke verwenden?

Die Antwort lautet: Ja, probieren Sie zuerst den regulären Effekt aus. Stellen Sie die Breite aller Bilder auf 90 % ein. Die einfachste Möglichkeit besteht darin, das style-Attribut zum img-Tag hinzuzufügen und dann die Breite im style anzugeben.

Unter Verwendung regulärer Regeln besteht der erste Schritt darin, alle IMG-Tags abzugleichen. Da das IMG-Tag nicht unbedingt über ein Style-Attribut verfügt, müssen Sie zunächst feststellen, ob ein Style-Attribut vorhanden ist, und dann width: 90% hinzufügen das Stilattribut? Nein, dadurch werden möglicherweise andere Originalattribute überschrieben. Fügen Sie sie also einfach direkt hinzu. Durch das Hinzufügen werden sie nicht überschrieben! Funktioniert immer noch nicht. Was ist, wenn ursprünglich Breite vorhanden war? . .

Ich habe noch nicht mit dem Schreiben regulärer Ausdrücke begonnen, es ist bereits sehr mühsam. Tatsächlich ist die Implementierung sogar noch komplizierter.

Glücklicherweise können wir unsere Denkweise ändern und dieses Problem mithilfe von jQuery lösen.

Die Stärke von jQuery besteht darin, dass es einen HTML-String direkt in ein Dom-Element packen kann. Dieses Dom-Element existiert nicht auf der aktuellen Seite, es wird im Speicher abgelegt.

Über jQuery benötigen Sie nur diesen Code:

//Definieren Sie den Container, um das Abrufen der geänderten HTML-Zeichenfolge zu erleichtern
//Verwenden Sie jQuery direkt, um „

“ einzuschließen. Zu diesem Zeitpunkt befindet sich ein div-Element im Speicher
var $container = $("

");
//Angenommen, dies ist die HTML-Zeichenfolge, die geändert werden muss
var html = "";
//Fügen Sie die zu ändernde HTML-Zeichenfolge direkt in den Container
ein //jQuery ist leistungsstark genug, um HTML-Strings automatisch in DOM-Elemente zu verpacken und sie dann in den Div-Container im Speicher
einzufügen $container.append(html);
//Suche nach allen IMG-Tags im Container und durchlaufe
$container.find("img").each(function(i,n){
//Ändern Sie für jedes IMG-Element direkt das Breitenattribut in seinem Stilattribut
//Wenn das Stilattribut nicht vorhanden ist, fügen Sie es automatisch hinzu. Wenn bereits ein Breitenattribut vorhanden ist, müssen Sie es nicht zu sehr beunruhigen
$(n).css({
       Breite: „90 %“
});
});
//Erhalten Sie die geänderte HTML-Zeichenfolge, die den HTML-Inhalt des Containers
darstellt alarm($container.html());

Die Kommentare im Code sind sehr detailliert, daher werde ich nicht zu viel erklären. Wir müssen verstehen, dass jQuery nicht nur den HTML-Code in der realen Seite, sondern auch den virtuellen HTML-Code im Speicher verarbeiten kann.

Durch den Vergleich der beiden glaube ich, dass die Leser sofort erkennen können, welche Methode besser ist.

Wie Xiao Cai oft sagt: Wenn Sie glauben, dass ein Problem gelöst werden kann, es aber nach langer Zeit immer noch nicht gelöst wurde, denken Sie wahrscheinlich aus einem anderen Blickwinkel darüber nach, und das Problem wird es tun gelöst werden!