在 innerHTML 输出中插入新行答案

【问题标题】：Inserting new lines into innerHTML output在 innerHTML 输出中插入新行
【发布时间】：2015-07-15 20:26:21
【问题描述】：

如果我有一个变量字符串 var text = "Hello World!" 并且我想在单词 Hello 之后放置一个新行，我知道我可以创建一个新变量 var b = text.replace(" ", "\n"); 并且 console.log(b) 将以 2 行显示文本。（我也知道有多种方法可以在不使用 replace 方法的情况下做到这一点）。

但是我有一堆来自 document.getElementById("div").innerHTML 的文本，它返回一堆 script 和 img 以及更多 div 标签等。当它写这个时，它并没有真正做任何间距完全没有，只是将所有字符混合在一起，一行中尽可能多的字符。

有什么方法可以打印出 document.getElementById("div").innerHTML 的内容，这样在每个标签 </script> </img> 等结束后，它会为更容易阅读？我尝试对 (">",">\n") 进行替换，但这并没有做任何事情，我假设是因为 innerHTML 的格式，而不是我假设的文本字符串。

【问题讨论】：

解释更容易阅读？源代码？客户看到了什么？

标签： javascript html tags newline line-breaks

【解决方案1】：

替代`.innerHTML`

.textContext 并不完美，但在这种情况下你可以很好地使用它：

var text = document.getElementById("div").textContent;

解决方案

用换行符替换：

text.replace(/(img\/|script)\>/ig, '$1>\n')

有休息：

text.replace(/(img\/|script)\>/gi, '$1>\<br/>')

正则表达式

(            <- Start capturing group
    img\/    <- Select img\
    |        <- OR
    script   <- Select script
)
\>           <- Matches > character

g 是全局修饰符。 i 是不区分大小写的修饰符。字符串中的 $1 是替换捕获组。

【讨论】：

在这种情况下 .textContext 似乎做了很多标签内的信息。不过，RegExp 信息很有帮助。几个月前，我查看了 RegExp，并一直在尝试在代码中尽可能多地实现它们，只是为了习惯它。

【解决方案2】：

replace js 命令只是替换第一个字符，试试这个：

str.replace(/>/g, "><br>");

【讨论】：

这很接近了。使用带有 RegExp 的全局修饰符是我真正缺少的，但是当我将 />/g 替换为 ">\n" 而不是 ">
" 时它起作用了

【解决方案3】：

获取正确的节点并改为这样做：

var b = text.replace(/\s+/, '<br />');

HTML 将新行和空白视为单个空白。当然，如果您只是希望文本易于用户准备并且您知道内容已经是什么，那么<pre></pre> 可能是您的朋友。

【讨论】：

替代.innerHTML

解决方案

正则表达式

替代`.innerHTML`