javascript - 将新行插入到 innerHTML 输出中

Question

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

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

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

Answer 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 将替换捕获组。