内容可编辑的正则表达式空格不起作用

Question

我正在尝试验证 contenteditable 值是否只有空格/空格。在我的示例中，如果该值只有空格/空格，则根据我的正则表达式字符串它不应该匹配，但它不能按预期工作。当我输入完整的空格时，它会保持匹配。

编辑：黑色区域是您可以输入文本的地方。

https://jsfiddle.net/j1kcer26/5/

JS

var checkTitle = function() {
  var titleinput = document.getElementById("artwork-title").innerHTML;
  var titleRegexp = new RegExp("^(?!\s*$).+"); //no blank spaces allowed
  if (!titleRegexp.test(titleinput)) {
    $('.start').removeClass('active-upload-btn');
    console.log('no match')

  } else if (titleRegexp.test(titleinput)) {
    $('.start').addClass('active-upload-btn');
    console.log('match')
  }
};

$('#artwork-title').on('keyup change input', function() {
  checkTitle();
});

HTML

<div class="post-title-header">
  <span class="user-title-input title-contenteditable maxlength-contenteditable" placeholder="enter text here" contenteditable="true" name="artwork-title" id="artwork-title" autocomplete="off" type="text" spellcheck="false"> 
  </span>
</div>

<div class="start">
      turn red if match
</div>

Answer 1

如果您查看实际的内部 HTML，您会看到诸如 <br> 元素或   实体之类的内容。您的正则表达式似乎无法处理这些问题。

如果您只关心文本而不是 HTML，您可能需要考虑使用 textContent 而不是 innerHTML。或者，如果您真的想要纯文本，请使用 <textarea/> 而不是内容可编辑 div，后者用于生成 HTML 的富文本样式编辑。

编辑：

您的正则表达式也不完全正确。因为您正在使用带有new RegExp("^(?!\s*$).+") 的RegExp 构造函数，所以字符串文字中的\s 将变成普通的s；如果您希望正则表达式中有一个实际的\s，则必须使用\\s。 IMO，除非您正在动态构建一个正则表达式文字，否则最好使用正则表达式文字，例如/^(?!\s*$).+/，或者我发现这是一种更简单的替代方法，可以告诉您字符串是否完全是空格：/^\s+$/。