Javascript 替换 <br> html 元素的 %0A

Question

如何使用 Javascript 在 HTML 页面上显示 URL 参数以换行显示？我正在使用下面的代码:

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"));
            }
        }
    }

编辑:

    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"></pre></li>
</ul>

Answer 1

听起来您想获取查询参数并将它们呈现在 ul 中，其中换行符出现在查询参数中(例如，换行符、字符代码 0x0A，又名 JavaScript 和许多类似语言中的 \n)。

这是一个由三部分组成的过程:

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>