每行内容都包裹在一个 div 中答案

【问题标题】：Each line of content wrapped in a div每行内容都包裹在一个 div 中
【发布时间】：2017-08-15 22:49:33
【问题描述】：

我在解决 provemath 上的内容未按预期呈现的问题时遇到了问题。

问题在于书面内容中的每一行（第一行除外）都包含在<div> 中。比如内容

line1.
line2.

正如您通过 Safari 网络检查器看到的那样，实际上呈现为 <p>line1.<div>line2.</div></p>。期望的输出是<p>line1.<br>line2.</p>。

这里有一些事情可能会发挥作用......

我不确定浏览器如何接收输入的换行符。
我的内容渲染函数（包含在下面）运行 Markdown（实际上是 marked）和一些正则表达式。
CSS（包括在下面）控制某些内容的显示方式，我想知道它是否会导致 HTML 本身发生变化。我之前认为使用flexbox 会导致此问题，但我更改了 CSS 无济于事。

内容呈现如下：

内容由用户输入（按回车键换行）并使用 jQuery 的 .html 函数捕获

blind.value = $value.html()

获取内容，然后处理

function render_content(string) {
    // make all \ into \\ instead, so that they will be \ again when marked is done. This is for MathJax postrender compatability.
    string = string.replace(/\\/g, '\\\\')
    string = string.replace(/\n/g, '<br />') // not doing anything AFAIK
    string = marked(string)

    string = string.replace(/img(\d+)/g, '<img src="image/$1.jpg" />')
    string = string.replace(/\\includegraphics\{(.*?)\}/g, '<img src="image/$1.jpg" />')

    return string
}

CSS如下：

    .value {
        // display: inline-flex;
        display: inline;
        // flex-direction: column;
        vertical-align: top;
        width: 85%;
    }

你可以看到旧的 CSS 被注释掉了。

【问题讨论】：

...您使用哪种浏览器？再次查看测试我的线路直觉
.. 它确实生成了一个 br
@G-Cyr 这很奇怪。您的输入没有问题。我在 Opera (Chromium) v 46 和 Safari v 9.1.3 上试过这个。您在输入内容时是否按了键盘上的“ENTER”？我就是这么做的。
是的，我就是这样做的，最新的 FF for windows，OUPS ！！！只是用 chrome 测试......它会按照你的方式关闭 p 并生成一个 div:(
在 Firefox v 54 for Mac 上也可以正常工作。
"CSS（包括在下面）操纵某些东西的显示方式，我想知道它是否会导致 HTML 本身发生变化。我以前认为使用 flexbox 会导致这种情况，但我改变了CSS 无济于事。”只是想指出，不，CSS 不能改变实际的 HTML 元素。

标签： jquery html css google-chrome safari

【解决方案1】：

为什么在“换行符”之前处理“反斜杠”？你试过这个吗？

string = string.replace(/\n/g, '<br />')
string = string.replace(/\\/g, '\\\\')
string = marked(string)

【讨论】：

【解决方案2】：

尝试将两条线都包装在一个 div 中，然后使用 css 网格按照您的喜好呈现它们。这是 a link 记录 css 网格。

【讨论】：

这不是所需的输出。问题清楚地表明所需的输出将有行 not 包裹在<div> 中。出于其他原因需要这样做。

【解决方案3】：

为了得到答案，解决方案是使用正则表达式删除某些浏览器添加的 <div> 和 </div>。

由于用户输入被转义，这不会与用户手动键入“”相混淆，因为该用户输入会导致 HTML 转义字符串（并且不会产生 div，只是显示“”的文本）。

【讨论】：