Question

我认为这是一个简单的问题，但我无法在Stackoverflow和Google上找到答案。这是我的问题。我想输出带有转义字符的字符串。我使用了方法document.getElementIdBy（）。

这是我的例子

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
    <p id="example1"></p><br>
    <p id="example2"></p><br>
    <p id="example3"></p><br>
    <p id="example4"></p><br>
    <script>
        var x = "\"ABC\""
        var y = "\'ABC\'"
        var z = "ABC\nDEF"
        var t = "ABC\bDEF"
        document.getElementById("example1").innerHTML=x;
        document.getElementById("example2").innerHTML=y;
        document.getElementById("example3").innerHTML=z;
        document.getElementById("example4").innerHTML=t;
    </script>
</body>
</html>

前两个工作正常。第三个不创建新行，第四个不创建退格行。我假设变量z就像这样

ABC
DEF

如果我把它写成p元素，它必须显示如下：ABC DEF。因此，我可以理解为什么它没有像我预期的那样出现（如果我使用空格来设置p元素的样式：pre它按照我的预期工作）

但是我想知道为什么\ b转义字符没有按预期工作。实际上我期待输出为：ABDEF（没有C）。可能有一些类似于上面的逻辑，但我找不到。有人可以解释为什么它不起作用吗？

Answer 1

我认为这些字符只是从HTML中删除，您可以通过用 

替换\ n来实现您想要的效果

e.g。

document.getElementById("example3").innerHTML=z.replace("\n","<br/>");

Answer 2

第三个没有创建新行

HTML标记中会忽略文本中的新行。它们呈现为space。使用<pre>标记保持格式：

<pre id="example3"></pre>

或添加代码而不是新行：

var z = "<p>ABC</p><p>DEF</p>"

或 

var z = "ABC<br>DEF"

第四个没有创建一个退格

不确定HTML / JS是否支持\b。

Answer 3

新行（\n）不会在html中生成新行。

所以，如果你写：

<p>first line
second line</p>

你会得到：第一行第二行。

所以要将\n写入html，您必须将其转换为 。

document.getElementById("example3").innerHTML=z.replace(/\n/g,'<br>');

此正则表达式将所有\n替换为 。

和\b只是代码为8的字符。只有在将其发送到输入或文本框时才会出现其特殊行为。

在JavaScript中输出转义字符

3 个答案: