从ContentEditable div解析纯文本标记

Question

我知道在可编辑的div上还有其他的问题，但是我找不到一个特定于与Markdown相关的问题。

用户将在ContentEditable div中键入。他可以选择做任意数量的与标记相关的事情，比如代码块、头等等。

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

1. $('.content').text()

在这种方法中，问题是所有的断线都被去掉了，当然，这是不可以的。

1. $('.content').html()

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

到2015年，解决这一问题的最佳(最简单、最可靠)方法是什么？

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

Answer 1

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

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

因此，在所有浏览器中都不能保证获得空白。

尝试使用元素的innerText属性。

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

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

火狐的innerText等价物是textContent (链接)，但这去掉了空白空间。

Answer 2

这就是我在编辑中使用我上面发布的链接时所能想到的。写在咖啡记录里。

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是否有效，如果它不起作用，那么我们就做另一件事：

1. 以HTML为例，它已经转义了文本。
2. 用换行符替换所有的<br>标记。
3. 去掉任何标签(转义的标签不会被删除，即用户输入的内容)。
4. 解除转义文本。