Javascript для замены% 0A для <br>HTML-элементов

Question

Как я могу отобразить параметры URL для отображения в новой строке на странице HTML, используя Javascript?Я работаю с этим кодом ниже:

return decodeURIComponent(pair[1].replace(/\%0A/g, "<br/>"));, но не могу отобразить результаты.

Приведенный выше код работает, потому что, например, если я return decodeURIComponent(pair[1].replace(/\%20/g, " "));, я вижу результаты.Только когда я использую элементы HTML, он не работает, т.е. <br>.

Вот полный код:

function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return decodeURIComponent(pair[1].replace(/\%0A/g, "\n"));
            }
        }
    }

Редактировать :

<code>    getQueryVariable("line1");
    getQueryVariable("line2");
    getQueryVariable("line3");


$(document).ready(function () {
        $(function () {
            $('#input1').val(getQueryVariable('line1')).trigger('keyup');
        });
        $('#input1').on('keyup', function () {
            var value = $(this).val();
            $("pre#one").html(value);
        });
    });

<input type="hidden" id="input1" />
<ul id="texts">  
    <li><pre id="one">

Answer 1

Звучит так, как будто вы хотите взять параметры запроса и отобразить их в виде ul с разрывами строк, когда в параметре запроса появляются разрывы строк (например, новая строка, код символа 0x0A, aka \n в JavaScript и многие другие).похожие языки).

Это процесс, состоящий из трех частей:

1. Декодирование параметра с помощью decodeURIComponent (вы уже это делаете).
2. Экранирование символовв результате, которые являются особыми в HTML (на практике достаточно только & и <).
3. Замена буквенных строк новой строки, которые отображаются в HTML как пробел, с разрывом строки или с использованием элемента pre или одного из white-space CSS-свойств, которые отображают разрывы строк (например, white-space: pre).

Вот пример, в котором мы конвертируем \n в<br>:

// A stand-in for window.location.search, since
// we can't control that in snippets
var search = "?" + [
  "line1=" + encodeURIComponent("This is line1"),
  "line2=" + encodeURIComponent("This is line2 which has\nmore than one line"),
  "line3=" + encodeURIComponent("This is line3")
  ].join("&");

function getQueryVariable(variable) {
    var query = search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
}

function escapeHTML(s) {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;");
}

function addQueryParamLI(ul, param) {
  var li = document.createElement("li");
  li.innerHTML = escapeHTML(param).replace(/\n/g, "<br>");
  ul.appendChild(li);
  return li;
}

var ul = document.getElementById("query-params");
addQueryParamLI(ul, getQueryVariable("line1"));
addQueryParamLI(ul, getQueryVariable("line2"));
addQueryParamLI(ul, getQueryVariable("line3"));

Query parameters:
<ul id="query-params"></ul>

Вот пример использования white-space: pre (единственное изменение заключается в том, что мы не конвертируем \n в <br> в addQueryParamLI и добавляемсвойство CSS для li элементов с правилом):

// A stand-in for window.location.search, since
// we can't control that in snippets
var search = "?" + [
  "line1=" + encodeURIComponent("This is line1"),
  "line2=" + encodeURIComponent("This is line2 which has\nmore than one line"),
  "line3=" + encodeURIComponent("This is line3")
  ].join("&");

function getQueryVariable(variable) {
    var query = search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return decodeURIComponent(pair[1]);
        }
    }
}

function escapeHTML(s) {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;");
}

function addQueryParamLI(ul, param) {
  var li = document.createElement("li");
  li.innerHTML = escapeHTML(param);
  ul.appendChild(li);
  return li;
}

var ul = document.getElementById("query-params");
addQueryParamLI(ul, getQueryVariable("line1"));
addQueryParamLI(ul, getQueryVariable("line2"));
addQueryParamLI(ul, getQueryVariable("line3"));

#query-params li {
  white-space: pre;
}

Query parameters:
<ul id="query-params"></ul>

Answer 2

Выступая здесь, но я предполагаю, что вы хотите отобразить кодированный URI-текст на странице ...

Вы можете просто вставить переданный текст в тег последекодирование, чтобы сохранить пробел.

var string = "This%20text%20consists%20of%20several%0AURL%20encoded%20new-line%0Acharacters";

document.getElementById("content").innerText = decodeURIComponent(string);

pre#content {
  font-family: Arial
}

обычно использует моноширинный шрифт, но его можно переопределить с помощью CSS.