jquery文字列変換URLエンコード形式

PHPz
リリース: 2023-05-12 14:55:08
オリジナル
1313 人が閲覧しました

フロントエンド開発では、特定の文字列を URL エンコード形式に変換する必要があることがよくあります。 URL エンコードとは、一部の特殊文字を対応する ASCII コードに変換して、URL で渡せるようにすることです。 JavaScript には、URL のエンコードに使用できる encodeURI メソッドと encodeURIComponent メソッドが用意されていますが、場合によっては、このプロセスを実装するために jQuery も使用する必要があります。この記事では、jQuery を使用して文字列を URL エンコード形式に変換する方法について説明します。

URL エンコードとは何ですか?

URL エンコードは、URL に渡すために文字列を URL 安全な形式に変換する方法です。 URL エンコードは、一部の文字、数字、記号を、前にパーセント記号を付けた同等の ASCII に変換します。たとえば、スペースの ASCII コードは 32 であるため、URL エンコードではスペースは に変換されます。

URL エンコードの一般的な使用シナリオには、次のものが含まれます。

  • URL パラメーターに特殊文字 (&= など) を渡す。
  • AJAX リクエストでデータを送信する場合は、配信を容易にするためにデータを URL エンコードします。

jQuery を使用して URL エンコードを実装する

jQuery では、$.param() メソッドを使用して、オブジェクトを URL エンコード シーケンス (これは、AJAX リクエストで jQuery によって使用されるデフォルトのシリアル化メソッドでもあります)。しかし、文字列を URL エンコードする必要がある場合はどうすればよいでしょうか?現時点では、encodeURIComponent() メソッドを使用してこれを実現できます。これは JavaScript の場合と同じです。たとえば、次のコードは、文字列 Hello, world! を URL エンコード形式に変換できます。

var encoded = encodeURIComponent('Hello, world!');
console.log(encoded); // "Hello%2C%20world%21"
ログイン後にコピー

上記のコードでは、encodeURIComponent() メソッドは、カンマとスペースは に変換されます。

URL エンコード メソッドのカプセル化

jQuery で encodeURIComponent() メソッドを使用して URL エンコードを実行する方法がわかったので、便宜上、それを関数にカプセル化できます。コード内で再利用します。たとえば、次のコード:

function urlEncode(str) {
  return encodeURIComponent(str)
    .replace(/[!'()*]/g, function(c) {
      return '%' + c.charCodeAt(0).toString(16);
    });
}
ログイン後にコピー

上記のコードでは、まず encodeURIComponent() メソッドを使用して文字列を URL エンコードし、次に正規表現を使用していくつかの文字列をエンコードします。 URL エンコード仕様にない文字は ASCII コードに変換されます。たとえば、!'()* 文字は !'()* に変換されます。

概要

この記事では、URL エンコードの概念と使用シナリオを紹介し、jQuery の $.param() メソッドと の使用方法を示しました。 encodeURIComponent() メソッドを使用して URL エンコードを実装します。また、実際の開発での使用を容易にするために、encodeURIComponent() メソッドを関数にカプセル化します。この記事が、誰もが URL エンコードを理解し、使用するのに役立つことを願っています。

以上がjquery文字列変換URLエンコード形式の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート