用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覆蓋。