Question

我知道有关于可编辑div的其他问题，但我找不到与Markdown相关的问题。

用户将在ContentEditable div中输入内容。并且他可以选择执行任何与Markdown相关的事情，例如代码块，标题等等。

我遇到了正确提取源并将其存储到我的数据库中以便稍后由标准Markdown解析器再次显示的问题。我尝试了两种方法：

$('.content').text()

在这种方法中，问题是所有换行符都被删除了，当然这是不行的。

$('.content').html()

在此方法中，我可以通过使用正则表达式将<br\>替换为\n，然后插入数据库，从而使换行符正常工作。但是浏览器还会将## Heading Here之类的内容包含在div中，如下所示：<div>## Heading Here</div>。这对我来说是个问题，因为当我以后再展示时，我没有得到正确的Markdown格式。

截至2015年，解决此问题的最佳（最简单，最可靠）方式是什么？

编辑：在此处找到了一个潜在的解决方案：http://www.davidtong.me/innerhtml-innertext-textcontent-html-and-text/

Answer 1

如果您检查jquery的.text()方法的documentation，

.text（）方法的结果是一个包含所有匹配元素的组合文本的字符串。（由于不同浏览器中HTML解析器的不同，返回的文本可能会在换行符和其他空格中有所不同。）

所以在所有浏览器中都无法保证获得空格。

尝试使用元素的innerText属性。

document.getElementsByClassName('content')[0].innerText

这将返回所有白色间距保持不变的文本。但这不是跨浏览器兼容的。它适用于IE和Chrome，但不适用于Firefox。

Firefox的innerText等价物是textContent（link），但这会消除空白。

Answer 2

这是我能够使用我在编辑中上面发布的链接提出的。这是在Coffeescript。

div = $('.content')[0]
if div.innerText
  text = div.innerText
else
  escapedText = div.innerHTML
              .replace(/(?:\r\<br\>|\r|\<br\>)/g, '\n')
              .replace(/(\<([^\>]+)\>)/gi, "")
  text = _.unescape(escapedText)

基本上，我正在检查innerText是否有效，如果没有，那么我们会在其他地方执行以下操作：

获取已转发文字的HTML。
将所有<br>标记替换为换行符。
删除任何标签（不会剥离转义的标签，即用户输入的内容）。
取消转发的文字。

从ContentEditable div解析纯文本Markdown

2 个答案: