Inhaltsverzeichnis
2. Verwenden Sie reguläre Ersatz-Escape-Zeichen
1. Probleme
Kürzlich bin ich bei der Projektentwicklung auf ein seltsames Phänomen gestoßen. Der Benutzer hat Daten mit drei Leerzeichen in der Mitte der Datenbank gespeichert. Die Datenbank wird normal gespeichert. Die von der Schnittstelle zurückgegebenen Daten haben ebenfalls drei Leerzeichen, aber es gibt nur ein Leerzeichen auf der Seite angezeigt. Das Phänomen ist wie folgt:
Dann hat mich die Testdame gefunden und gesagt, dass es durch das Einfügen und Kopieren zu Datenverlust gekommen sei, und dann. . . Auf einmal. . . Ich möchte gerne Fehler erwähnen.
Im Folgenden verwende ich zwei Methoden, um dieses Problem zu lösen.
Zweitens, die Lösung
1. Stillösung
Element diesen Stil hinzufügen:
white-space:preIn Bezug auf Leerzeichen lauten die spezifischen Parameter wie folgt:
| Wert | beschreiben |
| normal | Standard. Leerzeichen werden vom Browser ignoriert. |
| Vor | Leerraum wird vom Browser beibehalten. Es verhält sich wie ein Tag in HTML. |
| nowrap | Der Text wird nicht umgebrochen, der Text wird in derselben Zeile fortgesetzt, bis ein Tag gefunden wird. |
| vorverpacken | Leerzeichensequenzen bleiben erhalten, Zeilenumbrüche werden jedoch normal ausgeführt. |
| Vorlinie | Leerzeichensequenzen zusammenführen, aber Zeilenumbrüche beibehalten. |
| du erbst | Gibt an, dass der Wert des Leerraumattributs vom übergeordneten Element geerbt werden soll. |
sehen Sie die Wirkung;
2. Verwenden Sie reguläre Ersatz-Escape-Zeichen
Wenn Sie mehrere Zeichen auf der Seite anzeigen möchten, können Sie anstelle von Leerzeichen Entitätszeichen und interne Fragmente wie folgt verwenden: Name
'三个 字符' // 中间显示三个空格Dann können wir die Leerzeichen in den angezeigten Variablen mithilfe regulärer Ausdrücke wie folgt durch Entitätszeichen ersetzen:
const str = '三个 字符'；
str.replace(/\s/g, ' ') // "三个 字符"wichtiger Punkt:
Nachdem Sie es durch Entitätszeichen ersetzt haben, zeigen Sie die Variable auf der Seite mit innerHtml an, da der Browser sie sonst nicht erkennen kann.
Das Problem ist perfekt gelöst, YYDS! Gerne können Sie im Kommentarbereich kommunizieren.
Wenn der Artikel für Sie hilfreich ist, ❤️Folgen+Gefällt mir❤️Ermutigen Sie ihn ! Der Blogger wird weiterhin aktualisieren. . . .
Online-Blog: Fu Chaoyangs Blog