Кодировать URL в JavaScript?
Как безопасно кодировать URL-адрес с помощью JavaScript, чтобы его можно было поместить в строку GET?
var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;
Я предполагаю, что вам нужно закодировать myUrl
переменная на этой второй строке?
13 ответов:
Проверьте встроенную функцию
encodeURIComponent(str)
иencodeURI(str)
.
В вашем случае, это должно работать:var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);
у вас есть три варианта:
escape()
не будет кодировать:@*/+
encodeURI()
не будет кодировать:~!@#$&*()=:/,;?+'
encodeURIComponent()
не будет кодировать:~!*()'
но в вашем случае, если вы хотите пройти URL на
GET
параметр другой страницы, вы должны использоватьescape
илиencodeURIComponent
, но неencodeURI
.см. вопрос переполнения стека Лучшая практика: escape, или encodeURI / encodeURIComponent для дальнейшего обсуждения.
палка с
encodeURIComponent()
. ФункцияencodeURI()
не утруждает себя кодированием многих символов, имеющих семантическое значение в URL (например,"#","?", и.)"&"escape()
является устаревшим и не утруждает себя кодированием символов"+", которые будут интерпретироваться как закодированные пробелы на сервере (и, как указывалось другими здесь, не правильно кодирует символы, отличные от ASCII).есть хороший объяснение разницы между
encodeURI()
иencodeURIComponent()
в другом месте. Если вы хотите закодировать что-то, чтобы его можно было безопасно включить в качестве компонента URI (например, в качестве параметра строки запроса), вы хотите использоватьencodeURIComponent()
.
лично я считаю, что многие API хотят заменить ""на"+", Поэтому я использую следующее:
encodeURIComponent(value).replace(/%20/g,'+');
escape
реализуется по-разному в разных браузерах иencodeURI
не кодирует большинство символов, которые функционируют в URI (например, # и даже/) - он предназначен для использования на полном URI/URL, не нарушая его.Примечание: вы используете encodeURIComponent для значения на строку запроса (не поля/значение имена и, безусловно, не весь URL-адрес). Если вы сделаете это любым другим способом, он не будет кодировать символы, такие как=,?, &, возможно, оставляя строку запроса открытой.
пример:
const escapedValue = encodeURIComponent(value).replace(/%20/g,'+'); const url = 'http://example.com/?myKey=' + escapedValue;
Если вы используете jQuery я бы пошел на
$.param
метод. Этот URL-адрес кодирует поля сопоставления объектов со значениями, что проще для чтения, чем вызов метода escape для каждого значения.$.param({a:"1=2", b:"Test 1"}) // gets a=1%3D2&b=Test+1
для кодирования URL, как было сказано ранее, у вас есть две функции:
encodeURI()
и
encodeURIComponent()
причина, по которой оба существуют, заключается в том, что первый сохраняет URL-адрес с риском оставить слишком много вещей без присмотра, а второй кодирует все необходимое.
С первым, вы можете скопировать недавно экранированный URL в адресную строку (например), и это будет работать. Однако ваш unescaped ' & ' S будет мешать разделителям полей, '= ' S будет вмешивайтесь в имена полей и значения, и " + " будет выглядеть как пробелы. Но для простых данных, когда вы хотите сохранить природу URL-адреса того, что вы избегаете, это работает.
второе-это все, что вам нужно сделать, чтобы убедиться, что ничто в вашей строке не мешает URL. Это листья различных неважных персонажей неэкранированные, так что URL-адрес остается читабельным, как это возможно без вмешательства. URL-адрес, закодированных таким образом, не будет работать в качестве URL-адреса без снятия оно.
мне трудно придумать причины для использования encodeURI() -- я оставлю это умным людям.
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, '+'); }
подобные вещи я пробовал с обычным javascript
function fixedEncodeURIComponent(str){ return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A"); }
чтобы предотвратить двойное кодирование, рекомендуется декодировать url-адрес перед кодированием (если вы имеете дело с введенными пользователем URL-адресами, например, которые могут быть уже закодированы).
допустим, у нас есть
abc%20xyz 123
в качестве входных данных (один пробел уже закодирован):encodeURI("abc%20xyz 123") // wrong: "abc%2520xyz%20123" encodeURI(decodeURI("abc%20xyz 123")) // correct: "abc%20xyz%20123"
ничего не работало для меня. Все, что я видел, это HTML страницы входа, возвращаясь на клиентскую сторону с кодом 200. (302 сначала, но тот же запрос Ajax загружает страницу входа в систему внутри другого запроса Ajax, который должен был быть перенаправлением, а не загрузкой обычного текста страницы входа).
в контроллере входа в систему я добавил эту строку:
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; } } }); });
теперь у меня нет никаких проблем, и это работает как шарм.
кодировать строку URL
var url = $(location).attr('href'); //get current url //OR var url = 'folder/index.html?param=#23dd&noob=yes'; //or specify onevar 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
вы можете использовать библиотеку 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; }
что такое кодировка URL:
URL должен быть закодирован, когда есть специальные символы, расположенные внутри URL. Например:
console.log(encodeURIComponent('?notEncoded=&+'));
мы можем наблюдать в этом примере, что все символы, кроме строки
notEncoded
кодируются в знаки%. Кодирование URL-адрес, также известный как процент кодирования потому что он экранирует все специальные символы с %. Затем после этого знака % каждый специальный символ имеет уникальный кодзачем нам нужна кодировка URL:
некоторые символы имеют специальное значение в URL-строку. Например, то ? символ обозначает начало строки запроса. Чтобы успешно найти ресурс в интернете, необходимо различать, когда символ подразумевается как часть строки или часть структуры url.
как мы можем достичь кодировки URL в JS:
JS предлагает кучу сборки в функции полезности, которую мы можно использовать для легкого кодирования URL-х. Это два удобных варианта:
encodeURIComponent()
: принимает компонент URI в качестве аргумента и возвращает закодированную строку URI.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"));
мы можем наблюдать f мы помещаем весь URL в
encodeURIComponent
что косые черты foward ( / ) также преобразуются в специальные символы. Это приведет к тому, что URL-адрес больше не будет функционировать должным образом.поэтому (как следует из названия) использование:
encodeURIComponent
на определенной части URL-адреса, который вы хотите кодировать.encodeURI
на весь URL, который вы хотите закодировать.