从 contenteditable 中去除连续的换行符

Question

在我的表单中，我将 contenteditable div 的内容复制到一个隐藏字段中，该字段将发送到数据库。

<%= form_for(@comment, remote: true) do |f| %>
    <%= f.hidden_field :content, class: 'js-NewCommentContentShadow' %>
    <div class="js-NewCommentContentField" contenteditable="true"></div>
<% end %>

我正在像这样在视图中呈现该数据

<div><%=raw comment.content %></div>

问题是，按回车键输出这个换行符

<div>
    <br>
</div>

您可以连续添加多个换行符，这很好。但在某些时候，我想去掉所有连续的换行符，所以在文本之前或之后只允许一个换行符。

这可能发生在 contenteditable 内容被复制到影子输入时，或者当表单被提交时，或者以某种方式在视图中......我不挑剔。

以下是我希望如何影响输出的一些示例：

这个：

Some text
<div>
  <br>
</div>
Some more text

很好，应该保持原样。

这个：

Some text
<div>
  <br>
</div>
<div>
  <br>
</div>
Some more text

应该改为

Some text
<div>
  <br>
</div>
Some more text

这个：

Some text
<div>
  <br>
</div>
<div>
  <br>
</div>
<div>
  <br>
</div>

应该改为：

Some text

Answer 1

主要问题是comment.content 中的字符串包含不可打印的字符（特别是unicode 零宽度连接符 字符），因此字符串<div><br></div> 并不总是匹配，因为不可见个字符。

要解决这个问题，您首先需要从字符串中删除这些字符，然后删除额外出现的 <div><br></div>。

一种方法是使用gsub 和\p{Cf} regex¹ 并再次使用gsub 来替换额外的<div><br></div>，如下所示：

comment.content.gsub(/\p{Cf}/, "").gsub(/(<div><br><\/div>)+/, "<div><br></div>")
#=> "Some text<div>Some more text</div><div><br></div>. Here is another Some text<div><br></div><div>Some text</div>"

要完全删除字符串末尾出现的所有 <div><br></div>（示例 3），您可以添加另一个 gsub，从字符串末尾删除该子字符串，例如：

comment.content.gsub(/\p{Cf}/, "")
       .gsub(/(<div><br><\/div>)+/, "<div><br></div>")
       .gsub(/(<div><br><\/div>)+$/, "")

正则表达式中添加的$ 代表字符串结尾。

---

^{1\p{Cf} 代表“其他：格式”inUnicode 字符的一般类别。 更多信息请参考Regexp class documentation。}

Answer 2

你可以这样做：

"<div><br><br></div><br><br><br><div><br></div><br>".gsub(/(<br>){2,}/, '<br>')

输出

=> "<div><br></div><br><div><br></div><br>"

基本上，匹配()、<br> 组中的任意 2 次或多次出现 - {2,}，并替换 <br>。所以选择<br> 出现重复（不止一次）的所有位置并替换单个<br>。 在您的实际情况下，您可能需要为white space、line breaks 等添加容差。