Question

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

<% @parents.each do |parent| %> <#% whatever you want to display regarding the parent here %> <% parent.children.each do |child| %> <#% whatever you want to display regarding the child here %> <% child.fundings.each do |funding| %> <#% whatever you want to display regarding the funding here %> <% end %> <% end %> <% end %> 但无法显示结果。

以上代码正常运作，例如，如果我return decodeURIComponent(pair[1].replace(/\%0A/g, "<br/>"));我可以看到结果。只有当我使用HTML元素时，它才能工作，即return decodeURIComponent(pair[1].replace(/\%20/g, " "));。

这是一个完整的代码：

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

Answer 1

在这里走出困境，但我假设您要在页面中呈现URI编码文本...

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

＆＃13;

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

＆＃13;

pre#content {
  font-family: Arial
}

＆＃13;

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

＆＃13;

<pre></pre>通常会使用单倍间距字体，但可以使用CSS覆盖。

Answer 2

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

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

使用decodeURIComponent解码参数（您已经这样做了。）
在结果中转义特殊HTML中的字符（实际上只需&和<就足够了。）
使用pre元素或呈现行的white-space CSS属性之一替换使用换行符或替换为HTML空格的文字换行符休息（例如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属性添加到{{ 1}}带有规则的元素）：

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

用于将html元素替换为％0A的Javascript

2 个答案: