Question

使用javascript将其插入div后，无法在网页上显示“ \ t”。

看看下面的代码片段。第一个div将“ \ t”显示为文本，但是当使用javascript将它们插入div时，它们将由浏览器呈现，而不会在UI上显示为文本。

我需要使用javascript在div中插入文本，该文本包含“ \ t”字符，我需要按原样显示它们而不渲染它。

我看了很多关于stackoverflow的类似问题，但是没有一个真正起作用。请告知。

function callme() {
      document.getElementById('div2').innerHTML = "I am div 2, tab char 1:\t , tab char 2: \t";
    }

<!DOCTYPE html>
<html>
<body>
  <span id='div1'>I am div 1, tab char 1: \t , tab char 2: \t</span>
  <br />  <br />  <br />
  <button onclick="callme()">Click me to Insert tab characters in below div</button>
  <br />  <br />
  <span id='div2'>I am div 2, click above button insert tab characters</span>
</body>

</html>

Answer 1

只需使用\转义\\字符。

顺便说一句（FYI）：

请勿打扰自终止标记（<br />）。他们不会给您带来任何好处，并且可能导致代码中的错误。您可以阅读有关该here的更多信息。
<br>不应用于在文档布局中插入空格。它仅应用于将部分内容的一部分放在下一行。所有布局都应由CSS处理。
请勿将内联HTML事件属性（onclick用作there are many reasons，以免使用这种已有25年历史的技术，否则该技术就不会因此而丧生。相反，请遵循基于标准的现代element.addEventListener() API。

let output = document.getElementById('div2');
document.querySelector("button").addEventListener("click", callme);

function callme() {
  output.innerHTML = "I am div 2, tab char 1:\\t , tab char 2: \\t";
}

/* All layout should be done with CSS */
div { margin:2em 0; }

<div id='div1'>I am div 1, tab char 1: \t , tab char 2: \t</div>
<button>Click me to Insert tab characters in below div</button>
<div id='div2'>I am div 2, click above button insert tab characters</div>

Answer 2

您应该转义\，以便改用\\。

Answer 3

再添加一个\以转义\字符。同样，您可以为此使用pre标签。这是解决方案。

function callme() {
      document.getElementById('div2').innerHTML = "I am div 2, tab char 1:\\t , tab char 2: \\t";
    }

<!DOCTYPE html>
<html>
<body>
  <span id='div1'>I am div 1, tab char 1: \t , tab char 2: \t</span>
  <br />  <br />  <br />
  <button onclick="callme()">Click me to Insert tab characters in below div</button>
  <br />  <br />
  <span id='div2'>I am div 2, click above button insert tab characters</span>
</body>

</html>

如何在不呈现特殊字符的情况下在网页上将诸如制表符（\ t）这样的特殊字符显示为文本？

3 个答案: