Как безопасно кодировать URL в JavaScript

Вы можете использовать встроенный метод encodeURIComponent() для безопасного кодирования URL-адреса в JavaScript.

Метод encodeURIComponent() кодирует все символы, кроме следующих:

A-Z a-z 0-9 - _ . ! ~ * ' ( )

Давайте рассмотрим пример, чтобы понять, как работает этот метод:

<script>
    // URL
    var item = "$url+/unsafe@item #name;"
    
    // Кодируем имя элемента и добавляем в URL
    var url = "http://example.com/search.php?product=" + encodeURIComponent(item);
    
    document.write(url);
    // Печатает: http://example.com/search.php?product=%24url%2B%2Funsafe%40item%20%23name%3B
</script>

В качестве альтернативы вы можете использовать метод encodeURI(), который не кодирует символы, которые имеют особое значение (зарезервированные символы) для URI, например. #, /, ?, и т.д.

Метод encodeURI() кодирует все символы, кроме следующих:

A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

Следующий пример демонстрирует, как на работает этот метод:

<script>
    // URL
    var url = "http://example.com/search.php?product=laptop&price=500#featured";
    
    document.write(url);
    // Печатает: http://example.com/search.php?product=laptop&price=500#featured
</script>

Ознакомьтесь с руководствами по кодированию URL-адресов HTML и HTML-URL, чтобы узнать больше о различных компонентах URL-адреса и кодирования URL-адреса.