Javascript 替换 html 元素的 %0A

Question

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

return decodeURIComponent(pair[1].replace(/\%0A/g, " ")); 但无法显示结果。

上面的代码是有效的，因为例如，如果我 return decodeURIComponent(pair[1].replace(/\%20/g, " ")); 我可以看到结果。只有当我使用 HTML 元素时它才不起作用，即  .

完整代码如下：

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

在这里有点冒险，但我假设您想在页面中呈现 URI 编码文本...

您可以在解码后将传递的文本插入 <pre></pre> 标签，以便保留白色 space。

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> 通常会使用 mono-spaced 字体，但可以用 CSS.

覆盖

Answer 2

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

这是一个分为三部分的过程：

使用 decodeURIComponent 解码参数（您已经在这样做了）。
结果中的转义字符在 HTML 中是特殊的（实际上，只需 & 和 < 就足够了）。
使用 pre 元素用换行符或替换在 HTML 中呈现为 space 的文字换行符或呈现换行符的 white-space CSS 属性之一（例如 white-space: pre）。

这是我们将 \n 转换为   的示例：

// 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 的例子（唯一的变化是我们不在 addQueryParamLI 中将 \n 转换为  ，我们添加了 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>

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

Javascript to replace %0A for <br> html elements

javascript

newline

url-parameters