web-dev-qa-db-ja.com

JavaScriptでURLをエンコードしますか？

GET文字列に入れることができるように、JavaScriptを使用してURLを安全にエンコードするにはどうすればよいですか。

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;

2行目にmyUrl変数をエンコードする必要があると思いますか？

javascripturlencoding
2295
nickf

組み込み関数encodeURIComponent(str)とencodeURI(str)を調べてください。
あなたの場合は、これでうまくいくはずです。

var myOtherUrl = 
       "http://example.com/index.html?url=" + encodeURIComponent(myUrl);
2600
Buu Nguyen

3つの選択肢があります。

  • escape()はエンコードしません：@*/+

  • encodeURI()はエンコードされません：~!@#$&*()=:/,;?+'

  • encodeURIComponent()はエンコードされません：~!*()'

しかし、あなたの場合、 _ url _ を他のページのGETname__パラメータに渡したい場合は、escapename__またはencodeURIComponentname__を使用する必要がありますが、encodeURIname__は使用できません。

詳細については、スタックオーバーフローの質問ベストプラクティス：escape、またはencodeURI/encodeURIComponentを参照してください。

1438
CMS

encodeURIComponent() を固執してください。関数 encodeURI() は、URLの中で意味的に重要な多くの文字（例えば "＃"、 "？"、 "＆"）をエンコードするのに面倒ではありません。 escape() は廃止予定で、サーバー上のエンコードされたスペースとして解釈される "+"文字のエンコードを気にする必要はありません。文字）。

他にもNice encodeURI()とencodeURIComponent()の違いの説明 があります。安全にURIの構成要素として（たとえば、クエリ文字列パラメータとして）含めることができるようにエンコードする場合は、encodeURIComponent()を使用します。

165
Mike Brennan

個人的には、私は多くのAPIが ""を "+"に置き換えたいと思うので、次のようにします。

encodeURIComponent(value).replace(/%20/g,'+');

escapeはブラウザごとに実装が異なり、encodeURIはURI内で機能する文字の大部分（＃や/など）をエンコードしません。完全なURI/URLで分割することなく使用されるようになっています。

_ note _ ： クエリ文字列 の values にencodeURIComponentを使用します（フィールド名/値名ではなく、URL全体ではありません）。それ以外の方法で行うと、=、？、＆などの文字はエンコードされず、おそらくクエリ文字列が露出したままになります。

例：

const escapedValue = encodeURIComponent(value).replace(/%20/g,'+');
const url = 'http://example.com/?myKey=' + escapedValue;
69
Ryan Taylor

あなたがjQueryを使っているなら、私は $.param methodに行きます。これは、オブジェクトマッピングフィールドを値にURLエンコードするため、各値に対してエスケープメソッドを呼び出すよりも読みやすくなります。

$.param({a:"1=2", b:"Test 1"}) // gets a=1%3D2&b=Test+1
36
Maksym Kozlenko

URLをエンコードするには、前述のように、2つの機能があります。

encodeURI()

そして 

encodeURIComponent()

両方が存在する理由は、最初のものは余りにも多くのものをエスケープしないままにしておくという危険を冒してURLを保持するのに対し、2番目のものは必要なものすべてをエンコードするためです。

最初の方法では、（例えば）新しくエスケープしたURLをアドレスバーにコピーすることができ、それはうまくいくでしょう。しかし、エスケープされていない '＆'はフィールドの区切り文字と干渉し、 '='はフィールド名とフィールド値と干渉し、 '+'はスペースのように見えます。しかし、エスケープしているもののURLの性質を保持したい場合の単純なデータでは、これは機能します。

2つ目は、文字列内のURLが何も妨害しないようにするために必要なことです。 URLが干渉することなくできるだけ人間が読めるように、重要ではないさまざまな文字がエスケープされていません。この方法でエンコードされたURLは、アンエスケープせずにURLとして機能しなくなります。

そのため、時間がかかる場合は、必ずencodeURIComponent（）を使用してください。名前と値のペアを追加する前に、クエリ文字列に追加する前にこの関数を使用して名前と値の両方をエンコードします。

EncodeURI（）を使用する理由を思いつくのに苦労しています - それを賢い人々に任せましょう。

9
Gerard ONeill

encodeURIComponent（）がその道です。

var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

ただし、phpバージョンのurlencode()とは多少異なる点があります。@CMSで述べたように、すべての文字がエンコードされるわけではありません。 http://phpjs.org/functions/urlencode/ /の人たちはjsをphpencode()と同等にしました：

function urlencode(str) {
  str = (str + '').toString();

  // Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current
  // PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
  return encodeURIComponent(str)
    .replace(/!/g, '%21')
    .replace(/'/g, '%27')
    .replace(/\(/g, '%28')
    .replace(/\)/g, '%29')
    .replace(/\*/g, '%2A')
    .replace(/%20/g, '+');
}
8
Adam Fischer

私が普通のJavaScriptで試したのと同じようなこと

function fixedEncodeURIComponent(str){
     return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}
4
Narayan Yerrabachu

二重エンコーディングを防ぐために、エンコーディングの前にURLをデコードすることをお勧めします（たとえば、すでに入力されている可能性のあるユーザー入力URLを扱う場合）。

入力としてabc%20xyz 123があるとしましょう（1つのスペースはすでにエンコードされています）。

encodeURI("abc%20xyz 123")            //   wrong: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // correct: "abc%20xyz%20123"
3
serg

RL文字列のエンコード

 var url = $（location）.attr（ 'href'）; //現在のURLを取得
 //OR
 var url = 'folder/index.html？param =＃23dd＆noob = yes'; //または1つを指定します
 
 var encodedUrl = encodeURIComponent(url);
console.log(encodedUrl);
//outputs folder%2Findex.html%3Fparam%3D%2323dd%26noob%3Dyes


for more info go http://www.sitepoint.com/jquery-decode-url-string
2
Sangeet Shah

何も私にはうまくいきませんでした。私が見ていたのはログインページのHTMLだけで、コード200でクライアント側に戻ってきました。ログインページのテキスト。

ログインコントローラでは、私はこの行を追加しました：

Response.Headers["land"] = "login";

そして、グローバルなAjaxハンドラーで、私はこれをしました：

$(function () {
    var $document = $(document);
    $document.ajaxSuccess(function (e, response, request) {
        var land = response.getResponseHeader('land');
        var redrUrl = '/login?ReturnUrl=' + encodeURIComponent(window.location);
        if(land) {
            if (land.toString() === 'login') {
                window.location = redrUrl;
            }
        }
    });
});

今、私は何の問題もありません、そしてそれは魅力のように働きます。

2
Asif Ashraf

これは LIVE DEMO のencodeURIComponent()とdecodeURIComponent() JSの組み込み関数です。

<!DOCTYPE html>
<html>
  <head>
    <style>
      textarea{
        width:30%;
        height:100px;
      }
    </style>
    <script>
      // encode string to base64
      function encode()
      {
        var txt = document.getElementById("txt1").value;
        var result = btoa(txt);
        document.getElementById("txt2").value = result;
      }
      // decode base64 back to original string
      function decode()
      {
        var txt = document.getElementById("txt3").value;
        var result = atob(txt);
        document.getElementById("txt4").value = result;
      }
    </script>
  </head>
  <body>
    <div>
      <textarea id="txt1">Some text to decode
      </textarea>
    </div>
    <div>
      <input type="button" id="btnencode" value="Encode" onClick="encode()"/>
    </div>
    <div>
      <textarea id="txt2">
      </textarea>
    </div>
    <br/>
    <div>
      <textarea id="txt3">U29tZSB0ZXh0IHRvIGRlY29kZQ==
      </textarea>
    </div>
    <div>
      <input type="button" id="btndecode" value="Decode" onClick="decode()"/>
    </div>
    <div>
      <textarea id="txt4">
      </textarea>
    </div>
  </body>
</html>
0
jonathana

URLエンコーディングとは

URL内に特殊文字がある場合は、URLをエンコードする必要があります。例えば：

console.log(encodeURIComponent('?notEncoded=&+'));

この例では、文字列notEncodedを除くすべての文字が％記号でエンコードされていることがわかります。 URLエンコードは、 パーセントエンコード としても知られています。これは、すべての特殊文字を％でエスケープするためです。それから、この％記号の後に、すべての特殊文字は固有のコードを持ちます

なぜURLエンコードが必要なのですか。

特定の文字はURL文字列に特別な値を持ちます。例えば？ characterはクエリ文字列の先頭を表します。 Web上でリソースを正しく検索するためには、文字が文字列の一部またはURL構造の一部として意図されている場合を区別する必要はありません。

どのようにしてJSでURLエンコーディングを達成することができますか？

JSは、URLを簡単にエンコードするために使用できる一連のユーティリティ関数を提供しています。これらは2つの便利なオプションです。

  1. encodeURIComponent()：URIの構成要素を引数として取り、エンコードされたURI文字列を返します。
  2. encodeURI()：引数としてURIを取り、エンコードされたURI文字列を返します。

例と注意事項：

URL全体（スキームを含む、https：//）をencodeURIComponent()に渡さないように注意してください。これにより、実際には機能しないURLに変換される可能性があります。例えば：

// for a whole URI don't use encodeURIComponent it will transform
// the / characters and the URL won't fucntion properly
console.log(encodeURIComponent("http://www.random.com/specials&char.html"));

// instead use encodeURI for whole URL's
console.log(encodeURI("http://www.random.com/specials&char.html"));

URL全体をencodeURIComponentに入れると、スラッシュ（/）も特殊文字に変換されることがわかります。これにより、URLが正しく機能しなくなります。 

そのため（名前が示すとおり）：

  1. エンコードしたいURLの特定部分のencodeURIComponent。
  2. エンコードしたいURL全体のencodeURI。
0
Willem van der Veen

あなたはesapiライブラリを使用し、以下の機能を使用してあなたのURLをエンコードすることができます。この関数は、残りのテキストコンテンツがエンコードされている間、 '/'はエンコードに失われないことを保証します。

function encodeUrl(url)
{
    String arr[] = url.split("/");
    String encodedUrl = "";
    for(int i = 0; i<arr.length; i++)
    {
        encodedUrl = encodedUrl + ESAPI.encoder().encodeForHTML(ESAPI.encoder().encodeForURL(arr[i]));
        if(i<arr.length-1) encodedUrl = encodedUrl + "/";
    }
    return url;
}

https://www.owasp.org/index.php/ESAPI_JavaScript_Readme

0
Mohith Maratt