通过javascript从contenteditable div中获取文本内容

IT技术 javascript html
2021-03-04 17:53:27

我想通过 javascript 从 contentEditable div 中检索文本内容。这样做有哪些选择？我试过innerHTML，但它不起作用。

6个回答

为什么不为此使用 textContent：

var contenteditable = document.querySelector('[contenteditable]'),
    text = contenteditable.textContent;

http://jsfiddle.net/E4W8y/1/

因为 textContent 不尊重换行符（至少在 chrome 中）
2021-05-07 17:53:27

不幸的是，我发现这innerText是在可编辑的 dom 节点中保留换行符的唯一方法。我正在做的（目前仅在 chrome 中测试）是这样的：

 var innerText = editableDiv.innerText  // using innerText here because it preserves newlines
 if(innerText[innerText.length-1] === '\n') 
     innerText = innerText.slice(0,-1)             // get rid of weird extra newline
 return innerText
@CiroSantilli郝海东冠状病六四事件法功你是我能找到的唯一承认这个问题的人。N 个行终止符变成 2N-1 个行终止符。我绝望的解决方法： string.replace(/\n\n/g, '\n')。不幸的是，它并不一致。这种几乎翻倍的犯罪发生在键入的换行符上，而不是粘贴的换行符上。
2021-04-29 17:53:27
在 Chromium 78 和 Firefox 71 上，当我a<enter><enter>b在 div 上输入时，我得到a\n\n\nb（3 个换行符而不是预期的 2 个）。这是预期的吗？有没有办法解决它？用这个补丁测试程序。
2021-05-02 17:53:27
这应该是不使用 jQuery 时公认的答案。顺便说一句，我trim()用来摆脱开头和结尾的空白。
2021-05-04 17:53:27
@CiroSantilli 郝海东冠状病六四事件法功哇编辑，微软做对了几件事。对于当前的作品，我什至不需要标记。但我觉得 contenteditable 是一个下沉的岛屿。
2021-05-08 17:53:27
@BobStein 是的，我只是放弃了这个，转而使用像摩纳哥这样的合适的 Js 编辑器：microsoft.github.io/monaco-editor
2021-05-12 17:53:27

lblMailContent 是可编辑字段的 id。

var details= document.getElementById("lblMailContent").innerHTML;

将此代码放入clientClick. 它对我来说效果很好。

使用 jQuery 并做

var content = $('#my-contenteditable-div').html();

还可以查看这些链接：

http://west-wind.com/Weblog/posts/778165.aspx

从 contentEditable div 中提取文本

这里真的不需要jQuery。
2021-04-17 17:53:27
一般将包括所有 html
2021-04-17 17:53:27
将包含新行的 HTML
2021-04-27 17:53:27

我是这样解决的，因为我需要 html-input：

message = $('<div>').html(
   $('#area').html()
   .replace(/<(div|p|br)[^<]*?>/g, '&lt;br /&gt;')
   .replace(/<([(i|a|b|u)^>]+)>(.*?)<\/\1>/gim,
      function(v) { return '' + escape(v) + ''; })
).text();

允许标签 A、B、I、U 并用 BR 替换 Divs 和 Ps

您确定要使用正则表达式解析 HTML 吗？
2021-05-11 17:53:27
其它你可能感兴趣的问题
上一篇如何使用 ASP.NET 和 jQuery 返回 JSON 下一篇在 Chrome 中加载 iframe 时不会触发“加载”事件