将换行符转换为段落/br HTML标签，这可以使用单个正则表达式吗？

Question

我正在开发的应用程序要求用户输入纯文本，稍后将以HTML形式显示。 为了让用户的内容尽可能地好看，我们根据以下方式转换内容：

• 由两个或多个换行符分隔的文本块被包裹在<p>标签中，并且这些换行符（和它们之间的任何空格）被去除。

• 任何单个换行符（以及周围的空格）都会被替换为<br />标签。

我目前通过两个正则表达式替换来实现此功能，但想知道是否可以合并为一个。 这是我现在的代码（JavaScript）：

// content holds the text to process
content = '<p>' + content.replace(/\n([ \t]*\n)+/g, '</p><p>')
                 .replace(/\n/g, '<br />') + '</p>';

- rr.

---

只是好奇，你使用任何类似TinyMCE或YUI的HTML / JavaScript编辑器吗？还是只是一个表单/文本区域元素？ - Dave

只是一个普通的表单文本区域。 - rr.

你好，你能解决它吗？ - Sisir

Answer 1

有两个不同的替换字符串，因此无法在单个替换调用中完成。

但是第二个replace()可以更改为更有效的纯字符串替换。

content = '<p>' + content.replace(/\n([ \t]*\n)+/g, '</p><p>')
                 .replace('\n', '<br />') + '</p>';

所以，这里有一个正则表达式。:)

更新

Javascript 欺骗了我。字符串 replace 只处理第一次出现。

所以你需要使用现代的 replaceAll 函数

或者回退到第二个正则表达式。

                 .replace(/\n/g, '<br />') + '</p>';

或者在旧版浏览器中使用String replaceAll polyfill。

- Vadzim

---

这个解决方案的问题在于第二个替换调用只替换了第一个匹配项，而不是所有匹配项。你需要使用.replace(/\n/g, '<br />')来捕获所有剩余的换行符。 - Joseph Erickson

这现在实际上是一个无效回答。你的回答是“去这个其他页面。”@nobug的回答很好。 - evolross

Answer 2

我面临类似的需求——模仿wpautop功能到JavaScript中（用于主题自定义器）。

因此，这是我解决问题的方法：

首先，替换出现两个换行符的情况。

to = to.replace(/\n{2}/g, '&nbsp;</p><p>');

然后，当只剩下一个换行符时，替换它。

to = to.replace(/\n/g, '&nbsp;<br />');

最后，将整个内容用<p>标签包裹起来。

to = '<p>' + to + '</p>';

我使用 &nbsp; 是因为我的样式在段落后面有边距。如果您不需要它们，可以忽略它们。另外，一个缺点是单行断点会插入到下一个段落的开头，但这是我能容忍的。

- nobug