jqueryでURLに中国語の文字化けが発生する

Web 開発では、URL 内のパラメーターを取得するために jQuery を使用する必要があることがよくあります。しかし、URL に中国語が含まれている場合、中国語の文字化けの問題が発生しやすくなります。この記事では、jQueryを使ってURL内の中国語パラメータを取得する方法と、中国語が文字化けする場合の対処法を紹介します。

1. URL のパラメータを取得する

通常、URL のパラメータを取得するには 2 つの方法があります:

1. window.location.search メソッドを使用します。パラメータ string を取得し、キーと値のペアに解析します。
2. 正規表現を使用して URL 内のパラメータを照合します。

以下では、これら 2 つの方法をそれぞれ紹介します。

1. window.location.search メソッドを使用してパラメータ文字列を取得します。

window.location.search メソッドは、URL 内のパラメータ文字列を取得できます。次に例を示します。

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

次のコードを使用してパラメータ文字列を取得できます。

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

次に、JavaScript 組み込み関数 decodeURIComponent() を使用してパラメータ文字列を解析し、それをキーと値のペア:

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);  // 输出 张三

ここで注意してください。decodeURIComponent() を使用して中国語の文字をデコードすると、文字化けが発生します。

2. 正規表現を使用して URL 内のパラメータを照合する

正規表現を使用すると、URL 内の指定されたパラメータ値と照合できます。例:

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

次の正規表現を使用して、id パラメータの値と一致させます:

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

ここでは、正規表現 id=(d) を使用して、id パラメータの値と一致させます。ここで、d は数値を表し、複数の値を表します。数値、() はキャプチャの一致結果をグループ化するために使用されます。

2. 中国語の文字化け問題への対処

URL内の中国語のパラメータを取得する際に、中国語の文字化けの問題に遭遇することがよくあります。これは、URL 内の中国語の文字を正しく送信するにはエンコードする必要があるためです。そのため、URLパラメータの値を取得する際に漢字をデコードしないと文字化けしてしまいます。

JavaScript では、組み込み関数 encodeURIComponent() および decodeURIComponent() を使用して、URL 内の中国語の文字をエンコードおよびデコードできます。

1. encodeURIComponent()

encodeURIComponent() 関数は、URL 内の文字、数字、(,)、.、!、~、* を除く文字をエンコードするために使用されます。 ',- _ 以外の特殊文字はエンコードされます。例:

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

encodeURIComponent() 関数はスペースをエンコードしませんが、スペースをエンコードする必要がある場合は、関数 replace() を使用してスペース文字を置き換えることができることに注意してください:

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

2. decodeURIComponent()

decodeURIComponent() 関数は、URL 内の特殊文字をデコードするために使用されます。例:

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=张三

URL が正しく処理されない エンコードするとデコード時に文字化けが発生します。この状況が発生した場合は、unescape() 関数を使用して 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=张三

ここで、unescape() 関数は廃止されており、推奨されていないことに注意してください。文字化けを避けるために、URL を送信するときは中国語を正しくエンコードすることをお勧めします。

3. 結論

URL 内のパラメータの取得は Web 開発の基本的な操作であり、中国語の文字化けの問題も開発の一般的な困難です。これらの問題を回避するには、encodeURIComponent() 関数と decodeURIComponent() 関数を使用して URL をエンコードおよびデコードします。同時に、URL パラメーター値を取得するときに中国語の文字もデコードする必要があります。そうしないと文字化けが発生します。これらの操作は少し面倒かもしれませんが、中国のウェブサイトでは不可欠です。

以上がjqueryでURLに中国語の文字化けが発生するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。