如何检查富文本编辑器内容是否为空？答案

【问题标题】：How to check if rich text editor content is empty?如何检查富文本编辑器内容是否为空？
【发布时间】：2020-04-15 10:36:29
【问题描述】：

我有一个博客文章。我还有一个富文本编辑器 (Quill)。

是否可以检查富文本编辑器是否有空内容？

我使用 Quill（使用 React、Express JS、MongoDB）并且我想以某种方式防止在数据库中存储空值。

问题是，如果我在编辑器中添加空格，Quill 将生成空段落。所以没有内容只有空段落。使用普通输入字段，我可以检查空字符串，但如果我有富文本编辑器呢？

问题：

<p>                     </p>

甚至更糟

<p>                            </p><p><br></p><p><br></p><p>       </p>

我真的不想将它保存到数据库中。因为我不想有空的帖子。我该如何解决这个问题？可以以某种方式检查空段落的解决方案吗？...但是<br> 标签呢？

请打开此代码框并输入一堆空格并单击按钮。打开控制台，你会看到编辑器的输出。

代码沙盒：https://dxqhq.codesandbox.io/

非常感谢

【问题讨论】：

为什么不在 JavaScript 中使用“innerText”？今天几乎所有的浏览器都支持它。

标签： javascript reactjs express rich-text-editor quill

【解决方案1】：

据我了解，您只想在包含文本时才保存用户输入所以你必须从 HTML 中清除用户输入，然后检查输出长度

var regex = /(<([^>]+)>)/ig
body = "<p>test</p>"
hasText = !!body.replace(regex, "").length;
if(hasText) save()

【讨论】：

有效！这就是我想要达到的目标。非常感谢。
但这会跳过图像..！我们怎么能检查这个..！？
如果我想和.trim() 一起做类似的事情怎么办？例如我有我的所有内容，后面是空段落：<div>content etc.</div> <p> </p> <p></p>

【解决方案2】：

这对我有用，所以它不会逃脱图像。

function isQuillEmpty(value: string) {
   if (value.replace(/<(.|\n)*?>/g, '').trim().length === 0 && !value.includes("<img")) {
      return true;
    }
      return false;
    }

【讨论】：