用Javascript替换％0A <br> html元素

Question

如何使用Javascript显示URL参数以在HTML页面的新行中显示？ 我正在使用以下代码：

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，又名\\n在JavaScript和许多类似语言中）。

这是一个三部分的过程：

1. 使用解码decodeURIComponent解码参数（您已经在执行此操作）。
2. 将结果中的特殊字符转义为HTML（实际上，只需&和<就足够了）。
3. 用换行符或使用pre元素或呈现换行符white-space CSS属性之一替换文字换行符（在HTML中以white-space表示），该换行符用于呈现换行符（例如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的示例white-space: pre （唯一的变化是，我们没有在addQueryParamLI \\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编码的文本...

解码后，您可以只将传递的文本插入<pre></pre>标记中，以保留空白。

 var string = "This%20text%20consists%20of%20several%0AURL%20encoded%20new-line%0Acharacters"; document.getElementById("content").innerText = decodeURIComponent(string); 

 pre#content { font-family: Arial } 

 <pre id="content"></pre> 

<pre></pre>通常将使用等宽字体，但是可以用CSS覆盖。