


Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse
Allgemeine kommerzielle Websites haben eine Sprachanforderung, die sich an Chinesen richtet, die traditionelles Chinesisch verwenden, und insbesondere eine Option zum Wechsel zu traditionellem Chinesisch (oder „traditionelles Chinesisch“) bieten. Der traditionelle Ansatz besteht darin, dies auf der Serverseite zu tun, d. h. die Textsprache über einige Steuerelemente oder Filter zu konvertieren. Hier stellt der Autor eine einfache und praktikable Methode vor, mit der traditionelles Chinesisch nicht auf der Serverseite, sondern mithilfe von JavaScript im Frontend umgeschaltet werden kann.
Vor ungefähr sechs Jahren habe ich einen Blog-Beitrag speziell zu diesem Thema geschrieben. Dieser Artikel basiert auch auf diesem Artikel (der alte Artikel bezog sich auch auf den Code eines Meisters): „Eine kleine Möglichkeit, zwischen traditionell zu wechseln.“ und vereinfachte Zeichen in JavaScript „verbessern“. Die Zeiten haben sich geändert und es ist notwendig, den Code zu aktualisieren – der vorherige war zu unausgereift.
Wie unten gezeigt, platzieren wir den Umschaltknopf in der Fußzeile (natürlich können Sie ihn auch unter „Navigation“ oder an anderen auffälligeren Orten platzieren).
Da davon ausgegangen wird, dass alle Seiteneinstellungen den Unicode-Zeichensatz verwenden, besteht im Allgemeinen keine Notwendigkeit, das Problem mit dem GB2312/BIG5-Zeichensatz zu berücksichtigen. Der großartige Unicode-Zeichensatz deckt traditionelle chinesische Zeichen ab (UTF-8-Kodierung).
Wie rufe ich diese Funktion auf der Seite auf? Es ist ganz einfach. Führen Sie zuerst die folgenden Js ein (beachten Sie, dass es auch von Function.prototype.delegate() abhängt, die unten erwähnt wird):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
|
Dann binden wir einfach das Button-Ereignis Bindung an die globale Funktion window.toChinese(el), window.toSimpleChinese(el). el ist das Button-Element.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
Die beiden längeren Zeichenfolgenvariablen im js-Code sind vereinfachtes Chinesisch und traditionelles Chinesisch. Es ist nichts Magisches, zwischen ihnen zu wechseln. Der Text kann eins zugeordnet werden. zu eins durch diese Variablen. Dies ist natürlich nur die häufig verwendete Entsprechung zwischen traditionellem Chinesisch und vereinfachtem Chinesisch, und sie ist mechanisch. Einige spezielle Übersetzungen müssen kontextualisiert werden, und erweiterte Konvertierungen werden hier nicht besprochen.
Werfen wir zunächst einen Blick auf die Variablenfunktion translator. Wenn Sie sie ausführen, wird das gesamte DOM rekursiv durchlaufen (man kann sagen, dass es sich um eine relativ dumme Methode handelt).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Konvertieren Sie den DOM-Inhalt , woran wir sofort gedacht haben. Es mag el.innerHTML sein, aber es ist nicht notwendig, und innerHTML ist bei der Rekursion nicht praktisch. Denken Sie noch einmal darüber nach. Wir müssen eigentlich nur den Text konvertieren. Die DOM-API kann den Textknoten bestimmen (node.nodeType == 3) und dann wird das lesbare und beschreibbare Datenattribut verwendet, um den Text festzulegen. . Auf diese Weise können wir die Umstellung auf traditionelles Chinesisch abschließen. Das gleiche Prinzip gilt für andere Knotenattribute wie Titel, Alt und Wert. Darüber hinaus ist if (("||BR|HR|TEXTAREA|".indexOf("|" + node.tagName + "|")) > 0)continue; eine Methode zum Ausschließen bestimmter Knoten, und ihre Idee ist ganz besonders. Sie können mehr beobachten.
coverntFn ist ein Funktionsparameter. Durch die Root-Funktion TranslateText(text, isBig5) werden zwei neue Funktionen generiert: var Traditionalized = TranslateText.delegate(Null, True), Simplified = TranslateText.Delegate(Null, False);
1 2 3 4 5 6 7 8 9 10 11 |
|
Funktion. Prototyp Die .delegate()-Methode lautet wie folgt.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
Die Umwandlung zwischen traditionell und vereinfacht ist im Grunde so. Es ist erwähnenswert, dass der Browser tatsächlich die Gebietsschemavariablen für uns identifiziert, hauptsächlich navigator.userLanguage ||. Diese Variable kann auch serverseitig abgerufen werden und der Header lautet: Request.ServerVariables("http_accept_sprache").
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
Schließlich speichern wir auch den Sprachstatus durch Cookies.
Lassen Sie mich Ihnen die nächsten drei Schritte vorstellen, damit Ihre Website den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützt
Viele Websites möchten dies besser unterstützen Betreuung unterschiedlicher Benutzer. Für vereinfachtes/traditionelles Chinesisch-Lesegewohnheiten wird ein Schriftartenwechsel zwischen vereinfachter und traditioneller Version bereitgestellt, um die Benutzererfahrung zu verbessern. Obwohl beispielsweise der Autor von Hexo aus Taiwan stammt, bietet die offizielle Website von Hexo nicht nur eine traditionelle chinesische Version, die für taiwanesische Landsleute zum Lesen geeignet ist, sondern auch eine vereinfachte chinesische Version, die für unsere Landsleute auf dem Festland geeignet ist und sich um uns kümmert Benutzer auf dem Festland, die es gewohnt sind, vereinfachtes Chinesisch zu lesen und zu schreiben, haben auf dem chinesischen Festland viele treue Fans gewonnen. Ebenso können wir auch eine traditionelle chinesische Version bereitstellen, um den Lesegewohnheiten von Landsleuten aus Taiwan und Hongkong Rechnung zu tragen, die traditionelle chinesische Schriftzeichen verwenden.
Detaillierte Implementierung:
Klicken Sie zunächst mit der rechten Maustaste hier, um die für den Wechsel zwischen vereinfachten und traditionellen Schriftarten erforderliche Datei tw_cn.js zu speichern, herunterzuladen und auf Ihren eigenen Website-Bereich hochzuladen.
Zweitens ändern Sie die Vorlage und fügen Sie den folgenden Code an der Stelle hinzu, an der Sie die Schaltfläche „Vereinfacht-Traditionell“ anzeigen möchten. Normalerweise fügen Sie ihn einfach zu header.php oder siderbar.php hinzu.
1 |
|
Fügen Sie abschließend den folgenden Code in footer.php hinzu. Denken Sie daran, das Element cookieDomain zu ändern.
1 2 3 4 5 6 7 8 9 10 |
|
Damit ist im Grunde die Umschaltfunktion zwischen vereinfachtem und traditionellem Chinesisch abgeschlossen, unabhängig davon, ob Sie ein statisches Blog wie Hexo, Jelly, Octopress oder ein dynamisches Blog wie WordPress, Typecho, Emlog, Z-Blog usw. sind. usw., Sie können es verwenden. Für spezifische Demonstrationseffekte können Sie unten in meinem Blog auf die Schaltfläche „Vereinfachtes Chinesisch“ klicken. Der Text und der Stil der Schaltfläche „Vereinfachtes Chinesisch“ können je nach persönlichen Vorlieben geändert werden.

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...

JavaScript zu lernen ist nicht schwierig, aber es ist schwierig. 1) Verstehen Sie grundlegende Konzepte wie Variablen, Datentypen, Funktionen usw. 2) Beherrschen Sie die asynchrone Programmierung und implementieren Sie sie durch Ereignisschleifen. 3) Verwenden Sie DOM -Operationen und versprechen Sie, asynchrone Anfragen zu bearbeiten. 4) Vermeiden Sie häufige Fehler und verwenden Sie Debugging -Techniken. 5) Die Leistung optimieren und Best Practices befolgen.

Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...

Erforschen Sie die Implementierung der Funktion des Bedien- und Drop-Einstellungsfunktion der Panel ähnlich wie VSCODE im Front-End. In der Front-End-Entwicklung wird VSCODE ähnlich wie VSCODE implementiert ...

Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...
