在 innerHTML 输出中插入新行

Question

如果我要为变量设置一个字符串 var text = "Hello World!" 并且我想在 Hello 一词后换行，我知道我可以创建一个新变量 var b = text.replace(" ", "\n"); 和 console.log(b) 将分两行显示文本。（我也知道有多种方法可以在不使用替换方法的情况下执行此操作）。

但我有一堆来自 document.getElementById("div").innerHTML 的文本 returns 一堆脚本和 img 以及更多 div 标签等. 当它写这个的时候，它根本没有做任何间距，只是把所有的字符都挤在一起，在一行中尽可能多的字符。

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

Answer 1

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

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

Answer 2

获取正确的节点并改为执行此操作：

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

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

Answer 3

替代`.innerHTML`

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

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

解决方案

换行：

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

有休息时间：

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

正则表达式

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

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

在 innerHTML 输出中插入新行

Inserting new lines into innerHTML output

html

javascript

tags

newline

line-breaks

替代`.innerHTML`

解决方案

正则表达式

在 innerHTML 输出中插入新行

Inserting new lines into innerHTML output

html

javascript

tags

newline

line-breaks

替代.innerHTML

解决方案

正则表达式

替代`.innerHTML`