Heim Web-Frontend Front-End-Fragen und Antworten jquery erhält verstümmelte chinesische Zeichen in der URL

jquery erhält verstümmelte chinesische Zeichen in der URL

May 12, 2023 am 09:08 AM

In der Webentwicklung müssen wir häufig jQuery verwenden, um Parameter in der URL abzurufen. Wenn die URL jedoch chinesische Zeichen enthält, kann es leicht zu Problemen mit verstümmelten chinesischen Zeichen kommen. In diesem Artikel stellen wir vor, wie Sie mit jQuery chinesische Parameter in der URL abrufen und wie Sie mit dem Problem verstümmelter chinesischer Zeichen umgehen.

1. Rufen Sie die Parameter in der URL ab.

Es gibt normalerweise zwei Möglichkeiten, die Parameter in der URL abzurufen:

  1. Verwenden Sie die Methode window.location.search, um die Parameterzeichenfolge abzurufen, und analysieren Sie sie dann in einen Schlüsselwert Paare.
  2. Verwenden Sie reguläre Ausdrücke, um Parameter in URLs abzugleichen.

Im Folgenden stellen wir jeweils diese beiden Methoden vor.

  1. Verwenden Sie die Methode window.location.search, um die Parameterzeichenfolge abzurufen.

Die Methode window.location.search kann die Parameterzeichenfolge in der URL abrufen, zum Beispiel:

http://example.com/index.html?id=123&name=张三

Sie können den folgenden Code verwenden, um die Parameterzeichenfolge abzurufen Parameterzeichenfolge:

var paramsStr = window.location.search; // 返回 ?id=123&name=张三

Dann können wir die in JavaScript integrierte Funktion decodeURIComponent() verwenden, um die Parameterzeichenfolge zu analysieren und in ein Schlüssel-Wert-Paar umzuwandeln:

function getParams(url) {
  var paramsStr = url.split("?")[1];  // 获取参数字符串
  var paramsArr = paramsStr.split("&");  // 将参数字符串转换为数组
  var paramsObj = {};
  for (var i = 0, len = paramsArr.length; i < len; i++) {
    var arr = paramsArr[i].split("=");
    var name = decodeURIComponent(arr[0]);  // 解码中文字符
    var value = decodeURIComponent(arr[1]);
    paramsObj[name] = value;  // 将键值对添加到paramsObj中
  }
  return paramsObj;
}

var params = getParams(window.location.href);
console.log(params.id);  // 输出 123
console.log(params.name);  // 输出 张三

Achten Sie darauf, decodeURIComponent() zum Dekodieren chinesischer Zeichen zu verwenden. andernfalls treten verstümmelte Zeichen auf.

  1. Verwenden Sie reguläre Ausdrücke, um Parameter in der URL abzugleichen.

Reguläre Ausdrücke können mit bestimmten Parameterwerten in der URL übereinstimmen, zum Beispiel:

http://example.com/index.html?id=123&name=张三

Sie können die folgenden regulären Ausdrücke verwenden, um den Wert des ID-Parameters abzugleichen:

var url = window.location.href;
var idReg = /id=(d+)/;
var id = idReg.exec(url)[1];
console.log(id);  // 输出 123

Hier verwendet Der reguläre Ausdruck id=(d+) wird verwendet, um den Wert des id-Parameters abzugleichen, wobei d eine Zahl darstellt, + mehrere Zahlen darstellt und () zum Gruppieren der übereinstimmenden Ergebnisse verwendet wird.

2. Umgang mit dem Problem verstümmelter chinesischer Schriftzeichen

Beim Abrufen der chinesischen Parameter in der URL stoßen wir häufig auf das Problem verstümmelter chinesischer Schriftzeichen. Dies liegt daran, dass die chinesischen Zeichen in der URL codiert werden müssen, um korrekt übertragen zu werden. Daher müssen wir chinesische Zeichen dekodieren, wenn wir URL-Parameterwerte erhalten, da sonst verstümmelte Zeichen angezeigt werden.

In JavaScript können wir die integrierten Funktionen encodeURIComponent() und decodeURIComponent() verwenden, um chinesische Zeichen in der URL zu kodieren und zu dekodieren. Die Funktion

  1. encodeURIComponent()

encodeURIComponent() wird zum Codieren von Sonderzeichen in der URL mit Ausnahme von Buchstaben, Zahlen, (,), .,!, ~, *, ', - und _ verwendet. Beispiel:

var str = "http://example.com/index.html?id=123&name=张三";
var encoded = encodeURIComponent(str);
console.log(encoded);  // 输出 http%3A%2F%2Fexample.com%2Findex.html%3Fid%3D123%26name%3D%E5%BC%A0%E4%B8%89

Beachten Sie, dass die Funktion encodeURIComponent() keine Leerzeichen codiert. Wenn Sie Leerzeichen jedoch als %20 codieren müssen, können Sie die Funktion replace() verwenden, um die Leerzeichen zu ersetzen:

var str = "http://example.com/index.html?id=123&name=张 三";
var encoded = encodeURIComponent(str.replace(/s/g, "%20"));
console.log(encoded);  // 输出 http%3A%2F%2Fexample.com%2Findex.html%3Fid%3D123%26name%3D%E5%BC%A0%20%E4%B8%89
  1. decodeURIComponent() Die Funktion

decodeURIComponent( ) wird zum Dekodieren von Sonderzeichen in der URL verwendet, zum Beispiel:

var str = "http%3A%2F%2Fexample.com%2Findex.html%3Fid%3D123%26name%3D%E5%BC%A0%E4%B8%89";
var decoded = decodeURIComponent(str);
console.log(decoded);  // 输出 http://example.com/index.html?id=123&name=张三

Es ​​ist zu beachten, dass es bei der Dekodierung zu verstümmelten Zeichen in der URL kommt, wenn die chinesischen Zeichen in der URL nicht korrekt kodiert sind. Wenn Sie auf diese Situation stoßen, können Sie die Funktion unescape() verwenden, um die URL zu dekodieren:

var str = "http://example.com/index.html?id=123&name=张三";
var encoded = escape(str); // 编码
var decoded = unescape(encoded); // 解码
console.log(decoded); // 输出 http://example.com/index.html?id=123&name=张三

Beachten Sie hier, dass die Funktion unescape() aufgegeben wurde und nicht empfohlen wird. Es wird empfohlen, chinesische Zeichen bei der Übertragung von URLs korrekt zu kodieren, um verstümmelte Zeichen zu vermeiden.

3. Fazit

Das Abrufen der Parameter in der URL ist ein grundlegender Vorgang in der Webentwicklung, und das Problem verstümmelter chinesischer Zeichen ist ebenfalls eine häufige Entwicklungsschwierigkeit. Um diese Probleme zu vermeiden, können wir die Funktionen encodeURIComponent() und decodeURIComponent() verwenden, um die URL zu kodieren und zu dekodieren. Gleichzeitig müssen beim Abrufen von URL-Parameterwerten auch chinesische Schriftzeichen dekodiert werden, da sonst verstümmelte Zeichen angezeigt werden. Auch wenn diese Vorgänge etwas mühsam sein mögen, sind sie für chinesische Websites unverzichtbar.

Das obige ist der detaillierte Inhalt vonjquery erhält verstümmelte chinesische Zeichen in der URL. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

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

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial
1510
276
Ein tiefes Eintauchen in die WebAssembly (WASM) für Front-End-Entwickler Ein tiefes Eintauchen in die WebAssembly (WASM) für Front-End-Entwickler Jul 27, 2025 am 12:32 AM

WebAssembly (WASM) Isagame-ChangerForFront-EnddeveloperSeekinghigh-Performancewebapplications.1. GWASMISABINYINTRUCTUCTIONFORMATTHATRUNSATNEAR-NATIVESPEED, EnablingLuageslikerust, C und GotoexecuteintheBrowser.2.

Serverseitiges Rendering mit Next.js erläutert Serverseitiges Rendering mit Next.js erläutert Jul 23, 2025 am 01:39 AM

Server-Siderenderering (SSR) Innext.JSGenerateshtmlontheserverforeachRequest, VerbesserungsprequerformanceAndseo.1.SSRISIDEALFORDYNAMICCONTTHATCHANGESFREQUELFREQUELLE, SHOasUserDashboards.2.

Sicherheitsheader für Frontend -Anwendungen Sicherheitsheader für Frontend -Anwendungen Jul 18, 2025 am 03:30 AM

Front-End-Anwendungen sollten Sicherheitsheader einstellen, um die Sicherheit zu verbessern, einschließlich: 1. Konfigurieren Sie grundlegende Sicherheitsheader wie CSP, um XSS, X-In-Inhalts-Typ-Optionen zu verhindern, um MIME-Erraten, X-Frame-Optionen zu verhindern, um Klick-Hijacking, X-XSS-Protekte zu verhindern, an diehbare alte Filter, HSTS-HSTS to-Kraft-HTTPs. 2. CSP-Einstellungen sollten vermeiden, unsichere In-Linien und unsichere Eval zu verwenden, Nonce oder Hash zu verwenden und den Berichtstests zu aktivieren. 3. HTTPS-bezogene Header umfassen die automatische Upgrade-Anforderung von HSTS und Referrer-Policy, um den Referator zu steuern. 4. Andere empfohlene Header wie Permis

Frontend -Entwicklung für Virtual Reality (VR) im Web Frontend -Entwicklung für Virtual Reality (VR) im Web Jul 19, 2025 am 02:35 AM

Der Kern der VR-Web-Front-End-Entwicklung liegt in der Leistungsoptimierung und des interaktiven Designs. Sie müssen WebXR verwenden, um ein grundlegendes Erlebnis zu erstellen und Geräteunterstützung zu überprüfen. Wählen Sie A-Frame oder Drei.JS Framework Development; Einheitlich verarbeiten Eingangslogik verschiedener Geräte; Verbesserung der Leistung durch Reduzieren von Zeichnungsanrufen, die Steuerung der Modellkomplexität und die Vermeidung einer häufigen Müllsammlung; Entwerfen Sie UI und Interaktionen, die sich an VR -Eigenschaften anpassen, wie z. B. Blickklicks, Controller -Statuserkennung und angemessenes Layout von UI -Elementen.

Frontend -Fehlerüberwachungs- und Protokollierungslösungen Frontend -Fehlerüberwachungs- und Protokollierungslösungen Jul 20, 2025 am 01:39 AM

Der Kern der Front-End-Fehlerüberwachung und -protokollierung besteht darin, Probleme so schnell wie möglich zu entdecken und zu lokalisieren und Benutzerbeschwerden zu vermeiden, bevor sie sie kennen. 1. Grundlegende Fehleraufnahmen erfordert die Verwendung von Fenster. Ein E -und Fenster. 2. Bei der Auswahl des Fehlerberichterstellungssystems werden Tools wie Wachposten, Laht, Bugsnag Priorität und achten Sie auf die Sourcemap -Unterstützung, die Verfolgung und die Gruppierung von SOURCEMAP -Funktionen. 3. Der gemeldete Inhalt sollte Browserinformationen, Seiten -URL, Fehlerstapel, Benutzeridentität und Network -Anforderungsfehlerinformationen enthalten. 4. Steuern Sie die Protokollfrequenz, um die Protokoll -Explosion durch Strategien wie Deduplizierung, aktuelle Begrenzung und hierarchische Berichterstattung zu vermeiden.

Erkennung und Prävention von Frontend Memory Leck Erkennung und Prävention von Frontend Memory Leck Jul 16, 2025 am 02:24 AM

Häufige Ursachen und Antwortmethoden für Front-End-Speicherlecks: 1. Der Ereignishörer wird nicht ordnungsgemäß gereinigt, z. 2. Die Verschlussreferenz führt dazu, dass die Variable recycelt wird, z. B. die externen Variablen in setInterval werden kontinuierlich referenziert. 3. Die Bibliothek von Drittanbietern wird nicht ordnungsgemäß verwendet, z. B. die Vue-Uhr ist nicht ordnungsgemäß gereinigt. Die Erkennungsmethode umfasst die Verwendung von Chromedevtools -Leistungs- und Speicherplatten zur Analyse von Speichertrends und Objektfreisetzungen. Best Practices, um Speicherlecks zu vermeiden, umfassen manuelle Reinigungsnäher beim Entladen von Komponenten, die Vermeidung von Verweise auf große Objekte in Verschluss, Verwendung von Schwächen/Schwachanlagen anstelle von gewöhnlichen Sammlungen, Optimierung komplexer struktureller Operationen und regelmäßiger Leistung

Verständnis des JavaScript -Ereignis -Delegationsmusters Verständnis des JavaScript -Ereignis -Delegationsmusters Jul 21, 2025 am 03:46 AM

Die Ereignisdelegation ist eine Technik, die den Ereignisblasenmechanismus verwendet, um die Ereignisverarbeitung von untergeordneten Elementen an das übergeordnete Element zu übergeben. Es reduziert den Speicherverbrauch und unterstützt dynamisches Content -Management, indem sie die Hörer an übergeordneten Elementen verbinden. Die spezifischen Schritte sind: 1. Hörer des Bindung von Ereignissen an den übergeordneten Container; 2. Verwenden Sie Event.Target, um die untergeordneten Elemente zu bestimmen, die das Ereignis in der Rückruffunktion auslösen. 3. Führen Sie die entsprechende Logik basierend auf den untergeordneten Elementen aus. Zu den Vorteilen gehört die Verbesserung der Leistung, die Vereinfachung der Code und die Anpassung an dynamisch hinzugefügte Elemente. Bei der Verwendung sollten Sie auf Ereignisblasenbeschränkungen achten, übermäßige zentralisierte Überwachung vermeiden und vernünftigerweise übergeordnete Elemente auswählen.

Performance-First State Management mit Zustand Performance-First State Management mit Zustand Jul 25, 2025 am 04:32 AM

Zustandisalightgewicht, PerformantantantemanagementsLolutionForreActAppSthatavoidsRedux-SBOilerplate; 1.USSELECTIVETRECTELTOPTOPREVENTURNEYREYREYRE-REENDERSBYSELECTINGINYTENEEDEEDEDEDEDEDEDEDSPROPERTY;

See all articles