JS - 如何在 <br> 处分割文本并放入 2 个 <p> 中

Posted 2023-02-22

【中文标题】JS - 如何在 <br> 处分割文本并放入 2 个 <p> 中

【英文标题】：JS - How to split text at a <br> and place in 2 <p>'s

【发布时间】：2015-10-19 06:17:53

【问题描述】：

我想做的是扫描段落的innerhtml并找到段落标记之间可以以各种形式出现的换行符

：

<br>, <br />, or <br></br>

并删除它们。但是，在换行符所在的位置，我想使用 document.createElement('p') 将它之前的所有文本放入它自己的段落中，并将它之后的所有文本放入另一个新段落中。

但是，如果有超过 2 个换行符，中间没有文本，或者只是空白，则删除/忽略它，不要费心将它放在自己的段落中。

这是我的意思的一个例子。以下是改动前的内容：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis nisi sem, id gravida felis suscipit at. Sed ipsum felis, posuere ut turpis at, faucibus tempor dui. Nunc gravida sapien id velit vestibulum euismod.
<br />
<br />
Praesent vehicula rhoncus bibendum. Aenean tempus maximus aliquam. Nulla facilisi. Maecenas justo felis, faucibus ut posuere eget, fringilla et arcu. Sed ut pellentesque leo, a tincidunt tellus.</p>

这就是我想将其更改为：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis nisi sem, id gravida felis suscipit at. Sed ipsum felis, posuere ut turpis at, faucibus tempor dui. Nunc gravida sapien id velit vestibulum euismod.</p>

<p>Praesent vehicula rhoncus bibendum. Aenean tempus maximus aliquam. Nulla facilisi. Maecenas justo felis, faucibus ut posuere eget, fringilla et arcu. Sed ut pellentesque leo, a tincidunt tellus.</p>

这可以在 Javascript 中实现吗？感谢您的阅读！

【问题讨论】：

javascript Equivalent to php Explode() 的可能重复项

你能解释一下为什么你想在客户端这样做，而不是首先在服务器上以正确的方式创建 HTML 吗？

因为用户通过填写​​表单将文本输入服务器，所以我需要以正确的方式格式化他们的 html。服务器的系统不会自行执行此操作，我不拥有它，也不知道如何更改它。

我明白了。用户是否使用某种可以配置的 WYSIWYG-HTML 编辑器，或者他们是否将原始 HTML 输入到文本框中？

检查此链接...它可能有助于解决问题***.com/questions/1144783/…

【参考方案1】：

第一个简单的答案，试试这个：

s = prompt('Input HTML text example', '<p>...your text here...</p>');
if(!!s) 
  console.log(s.replace(/(<br ?\/?>)+/ig, '</p><p>'));

这个方法假设原始文本是通过一些所见即所得的编辑器输入的，所以：

我们不需要检查整个文本是否包含在<p>...</p>中 与您引用的 </br> 之类的东西无关

相反，如果文本是作为 HTML 原始输入的，我们可能会遇到任何问题，因此需要一个完全不同的解决方案，基于对文本的编程详细分析。