Всем доброго времени суток и поехали! Кодирование и декодирование строки может быть очень полезно при передаче и получении данных, на пример через ajax, а иногда даже необходимо чтобы обезопасить себя от возможных ошибок и любопытных пользователей.
Допустим у нас есть строка такого типа:
var str = "<script> alert('Hello!!!'); <\/script>";
document.write(str);здесь в качестве строки у нас указан JavaScript-сценарий(вывод модального окна).
C помощью метода write объекта document, мы выводим нашу строку в браузер в результате чего и выполняется сценарий строки. Хочу отметить что для символа '/' я применил экранирование '\'.
Ну да ладно, теперь давайте рассмотрим нашу первую функцию , функцию кодирования escape():
var str = escape("<script> alert('Hello!!!'); <\/script>");
document.write(str);как видите теперь нам вывелась строка в новом формате, и понятно что не о каком выполнении сценария строки речи уже не идет:
%3Cscript%3E%20alert%28%27Hello%21%21%21%27%29%3B%20%3C/script%3
Что же здесь произошло? А произошло следующее, функция escape() - возвращает строковое значение в формате Юникода , то есть все специальные символы пробелы, кавычки и т. п. кодируются(к примеру пробел преобразуется в %20, а знак ! в %21), также все знаки значений которые превышают 255 сохраняются в формате %uxxxx.
Вы уже наверняка видели подобные строки в адресной строке:
http://js-test/index.html?newwindow=1&rlz=1C1BLWB_enRU768&ei=wqHyWcb0A8STadb1v5AN&q=%D0%BA%D0%B0%D0%BA+%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C+%D0%B8+%D0%BF%D0%B5%D1%80%D0%B5%D0%B1%D1%80%D0%B0%D1%82%D1%8C+%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+%D0%B8%D0%B7+%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8+%D1%81+%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E+js&oq=%D0%BA%D0%B0%D0%BA+%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C+%D0%B8+%D0%BF%D0%B5%D1%80%D0%B5%D0%B1%D1%80%D0%B0%D1%82%D1%8C+%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+%D0%B8%D0%B7+%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8+%D1%81+%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E+js&gs_l=psy-ab.3...430978.466415.0.466626.103.83.20.0.0.0.154.6073.75j6.81.0....0...1.1.64.psy-ab..2.82.4691...0j0i131k1j0i67k1j0i10i1k1j0i10i1i67k1j0i10i67k1j0i10i1i42k1j0i3k1j0i22i30k1j33i22i29i30k1j33i160k1j33i21k1.0.sfEPGbNjSm0
так вот если вы хотите закодировать какое либо значение в адресной строке, то функцию escape() использовать не стоит, так для кодирования строки URL есть специальная функция encodeURI, пример:
var url = encodeURI ('/test.html?code="<script>document.write("Hello!!!")<\/script>');
document.write(url);В результате на выходе мы получаем кодированную строку , которую можем вставлять в url. Используя данную функцию следует учитывать что она не кодирует символы (: , /, ; , ?) для кодирования этих знаков нужно воспользоваться другой функцией encodeURIComponent:
var url = encodeURIComponent ('/test.html?code="<script>document.write("Hello!!!")<\/script>');
document.write(url);результат
%2Ftest.html%3Fcode%3D%22%3Cscript%3Edocument.write(%22Hello!!!%22)%3C%2Fscript%3E
как вы понимаете с таким адресом мы не сможем никуда перейти , поэтому пользуйтесь данной функцией разумно.
Итак мы рассмотрели основные функции кодирования в js. Теперь непосредственно перейдем к функциям декодирования, которые из формата Юникод приводят нашу строку к более менее читаемому виду.
Декодирование это обратный процесс кодирования. К примеру если мы возьмем строку которую мы кодировали в самом начале с помощью функции escape()
var str = unescape('%3Cscript%3E%20alert%28%27Hello%21%21%21%27%29%3B%20%3C/script%3E');
document.write(str);Благодаря использованию функции декодирования unescape() наш закодированный сценарий на javaScript вновь будет выполняться.
для работы со строками url также есть функции декодирования decodeURI() и decodeURIComponent они же являются обратными для encodeURI и encodeURIComponent
var url = decodeURI('http://js-test/index.html?newwindow=1&rlz=1C1BLWB_enRU768&ei=wqHyWcb0A8STadb1v5AN&q=%D0%BA%D0%B0%D0%BA+%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C+%D0%B8+%D0%BF%D0%B5%D1%80%D0%B5%D0%B1%D1%80%D0%B0%D1%82%D1%8C+%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+%D0%B8%D0%B7+%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8+%D1%81+%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E+js&oq=%D0%BA%D0%B0%D0%BA+%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C+%D0%B8+%D0%BF%D0%B5%D1%80%D0%B5%D0%B1%D1%80%D0%B0%D1%82%D1%8C+%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+%D0%B8%D0%B7+%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8+%D1%81+%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E+js&gs_l=psy-ab.3...430978.466415.0.466626.103.83.20.0.0.0.154.6073.75j6.81.0....0...1.1.64.psy-ab..2.82.4691...0j0i131k1j0i67k1j0i10i1k1j0i10i1i67k1j0i10i67k1j0i10i1i42k1j0i3k1j0i22i30k1j33i22i29i30k1j33i160k1j33i21k1.0.sfEPGbNjSm0');
document.write(url);Здесь мы преобразовали эту ужасающую строку к более читабельному виду
http://js-test/index.html?newwindow=1&rlz=1C1BLWB_enRU768&ei=wqHyWcb0A8STadb1v5AN&q=как+получить+и+перебрать+параметры+из+адресной+строки+с+помощью+js&oq=как+получить+и+перебрать+параметры+из+адресной+строки+с+помощью+js&gs_l=psy-ab.3...430978.466415.0.466626.103.83.20.0.0.0.154.6073.75j6.81.0....0...1.1.64.psy-ab..2.82.4691...0j0i131k1j0i67k1j0i10i1k1j0i10i1i67k1j0i10i67k1j0i10i1i42k1j0i3k1j0i22i30k1j33i22i29i30k1j33i160k1j33i21k1.0.sfEPGbNjSm0
Что касается decodeURIComponent
var url = decodeURIComponent('%2Ftest.html%3Fcode%3D%22%3Cscript%3Edocument.write(%22Hello!!!%22)%3C%2Fscript%3E');
document.write(url);результат:
/test.html?code="Hello!!!
Вот так вот дорогие друзья сегодня вы узнали как кодировать и декодировать строки в javaScript , я надеюсь что данная статья была для вас интересной и познавательной и вы не раз еще воспользуетесь полученными знаниями.
А я желаю вам успехов и удачи! Пока!
