从 ContentEditable div 解析纯文本 Markdown答案

【问题标题】：Parsing plain text Markdown from a ContentEditable div从 ContentEditable div 解析纯文本 Markdown
【发布时间】：2015-08-03 05:57:20
【问题描述】：

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

用户将在 ContentEditable div 中输入内容。他可以选择做任何数量的与 Markdown 相关的事情，比如代码块、标题等等。

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

$('.content').text()

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

$('.content').html()

在这种方法中，我可以在插入数据库之前使用正则表达式将<br\> 替换为\n，从而使换行符正常工作。但是浏览器也会用 div 包装像 ## Heading Here 这样的东西，比如：<div>## Heading Here</div>。这对我来说是个问题，因为当我之后去显示这个时，我没有得到正确的 Markdown 格式。

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

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

【问题讨论】：

标签： javascript jquery markdown contenteditable

【解决方案1】：

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

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

所以不能保证在所有浏览器中都能得到空格。

尝试使用元素的innerText 属性。

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

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

Firefox 对应的 innerText 是 textContent (link)，但这会去掉空格。

【讨论】：

@Anbarsasan 有什么我可以为 Firefox 做的不去除空格的吗？
我不知道 Firefox 有什么方法。我最初尝试了您在此处回答之前发布的链接，但在 Firefox (31.8) 中问题仍然存在。

【解决方案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> 标记。
删除所有标签（转义的标签不会被删除，即用户键入的内容）。
取消转义转义文本。

【讨论】：