Maison interface Web Questions et réponses frontales jquery obtient des caractères chinois tronqués dans l'URL

jquery obtient des caractères chinois tronqués dans l'URL

May 12, 2023 am 09:08 AM

En développement web, nous avons souvent besoin d'utiliser jQuery pour obtenir des paramètres dans l'URL. Cependant, lorsque l’URL contient des caractères chinois, on peut facilement rencontrer le problème des caractères chinois tronqués. Dans cet article, nous présenterons comment utiliser jQuery pour obtenir les paramètres chinois dans l'URL et comment résoudre le problème des caractères chinois tronqués.

1. Récupérez les paramètres dans l'URL

Il existe généralement deux façons d'obtenir les paramètres dans l'URL :

  1. Utiliser window.location La méthode .search obtient la chaîne de paramètres et l'analyse en paires clé-valeur.
  2. Utilisez des expressions régulières pour faire correspondre les paramètres de l'URL.

Ci-dessous, nous présentons respectivement ces deux méthodes.

  1. Utilisez la méthode window.location.search pour obtenir la chaîne de paramètres

La méthode window.location.search peut obtenir la chaîne de paramètres dans l'URL, par exemple :

http://example.com/index.html?id=123&name=张三
Copier après la connexion
Copier après la connexion

Vous pouvez utiliser le code suivant pour obtenir la chaîne de paramètre :

var paramsStr = window.location.search; // 返回 ?id=123&name=张三
Copier après la connexion

Ensuite, nous pouvons utiliser la fonction intégrée JavaScript decodeURIComponent() pour analyser la chaîne de paramètres et la convertir sous la forme de la paire clé-valeur :

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);  // 输出 张三
Copier après la connexion

Veillez à utiliser decodeURIComponent() pour décoder les caractères chinois, sinon des caractères tronqués apparaîtront.

  1. Utilisez des expressions régulières pour faire correspondre les paramètres dans l'URL

Les expressions régulières peuvent correspondre aux valeurs de paramètres spécifiées dans l'URL, par exemple : # 🎜 🎜#

http://example.com/index.html?id=123&name=张三
Copier après la connexion
Copier après la connexion

Vous pouvez utiliser l'expression régulière suivante pour faire correspondre la valeur du paramètre id :

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

L'expression régulière id=(d+) est utilisée ici pour correspondre à la valeur du Le paramètre id, où d représente un nombre, + représente plusieurs nombres, () est utilisé pour regrouper et capturer les résultats correspondants.

2. Gérer le problème des caractères chinois tronqués

Lors de l'obtention des paramètres chinois dans l'URL, nous rencontrons souvent le problème des caractères chinois tronqués. En effet, les caractères chinois de l'URL doivent être codés pour être transmis correctement. Par conséquent, nous devons décoder les caractères chinois lors de l’obtention des valeurs des paramètres d’URL, sinon des caractères tronqués apparaîtront.

En JavaScript, nous pouvons utiliser les fonctions intégrées encodeURIComponent() et decodeURIComponent() pour encoder et décoder les caractères chinois dans l'URL.

    encodeURIComponent()
encodeURIComponent() est utilisée pour encoder les caractères de l'URL à l'exception des lettres, des chiffres, (,),., !,~ Les caractères spéciaux autres que , *, ', - et _ sont codés. Par exemple :

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
Copier après la connexion

Notez que la fonction encodeURIComponent() n'encodera pas les espaces, mais si vous devez encoder les espaces en %20, vous pouvez utiliser la fonction replace() pour remplacer les caractères d'espace : # 🎜🎜#
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
Copier après la connexion
# 🎜🎜#

decodeURIComponent()

  1. decodeURIComponent() est utilisée pour décoder les caractères spéciaux dans l'URL, par exemple :
  2. 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=张三
    Copier après la connexion
    # 🎜🎜#Note De plus, si les caractères chinois de l'URL ne sont pas correctement encodés, le décodage entraînera des caractères tronqués. Si vous rencontrez cette situation, vous pouvez utiliser la fonction unescape() pour décoder l'URL :
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=张三
Copier après la connexion

A noter ici que la fonction unescape() a été abandonnée et n'est pas recommandée. Il est recommandé d'encoder correctement les caractères chinois lors de la transmission d'URL afin d'éviter les caractères tronqués.

3. Conclusion

L'obtention de paramètres dans l'URL est une opération de base dans le développement Web, et le problème des caractères chinois tronqués est également une difficulté de développement courante. Pour éviter ces problèmes, nous pouvons utiliser les fonctions encodeURIComponent() et decodeURIComponent() pour encoder et décoder l'URL. Dans le même temps, les caractères chinois doivent également être décodés lors de l'obtention des valeurs des paramètres d'URL, sinon des caractères tronqués apparaîtront. Même si ces opérations peuvent être un peu fastidieuses, elles sont indispensables pour les sites chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Mar 19, 2025 pm 03:58 PM

L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.

Comment fonctionne l'algorithme de réconciliation React? Comment fonctionne l'algorithme de réconciliation React? Mar 18, 2025 pm 01:58 PM

L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159

Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Mar 18, 2025 pm 01:44 PM

Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.

Comment fonctionne le currying en JavaScript et quels sont ses avantages? Comment fonctionne le currying en JavaScript et quels sont ses avantages? Mar 18, 2025 pm 01:45 PM

L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code

Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Mar 19, 2025 pm 03:59 PM

L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.

Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()? Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()? Mar 21, 2025 pm 06:23 PM

L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.

Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Mar 19, 2025 pm 04:10 PM

L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.

Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés? Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés? Mar 19, 2025 pm 04:16 PM

L'article traite des avantages et des inconvénients des composants contrôlés et incontrôlés dans la réaction, en se concentrant sur des aspects tels que la prévisibilité, la performance et les cas d'utilisation. Il conseille les facteurs à considérer lors du choix entre eux.

See all articles