好的。我正在尝试做一些事情,以便连续每 2 个 <br> 变成一个 <p></p>
我设法让它从 <br><br> 转换为 <p></p> 一次。但是当我尝试将 2 <p> 连续放置时,不会再创建任何段落。
另一件事是我将从替换中获得的文本直接放在 element.innerHTML 中。发生的情况是,即使我直接在 TEXTAREA 中编写元素,这些元素也会被添加。是否还有一种方法可以在收到文本后对这个 HTML 进行编码?做我想做的这一切的最好方法是什么?
示例代码如下。如果我有以下 HTML 代码:
<p>
Esto es un texto
<br><br>Parrafo 1
<br><br>Parrafo 2
<br><br>Parrafo3
</p>
变得:
<p>
<p>Parrafo 1</p>
<p>Parrafo 2</p>
<p>Parrafo 3</p>
</p>
从前面的代码开始,当我执行以下操作时,我希望能够在每个段落中做到这一点:
<p>
<p>Parrafo 1 <br><br>Nuevo parrafo</p>
<p>Parrafo 2</p>
<p>Parrafo 3<br><br>Subparrafo de 3</p>
</p>
变得:
<p>
<p>Parrafo 1</p>
<p>Nuevo parrafo</p>
<p>Parrafo 2</p>
<p>Parrafo 3</p>
<p>Subparrafo de 3</p>
</p>
或者那两个段落放在最后而不是紧跟在他所在的段落之后
正如我所说,我已经设法用它们的内部文本创建了 2 个连续的段落,但是在创建第三个段落时,在这 2 个段落之一中创建了 2 个 BR。然后我更改了正则表达式,现在我只能连续创建 1 个段落。
无论如何,如果可能的话,我找不到正则表达式。这里是 HTML 和 javascript
HTML
<div>
<h4>Escribe un texto cualquiera</h4>
<textarea cols="60" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, id, quidem ex quaerat dignissimos saepe molestias vero praesentium nostrum iste libero voluptatem quam maxime quos quod obcaecati quae dolor pariatur!</textarea>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, id, quidem ex quaerat dignissimos saepe molestias vero praesentium nostrum iste libero voluptatem quam maxime quos quod obcaecati quae dolor pariatur!</p>
</div>
JavaScript
window.onload = function(){
const p1 = document.querySelector("#p1");
const textarea = document.querySelector("textarea");
textarea.addEventListener("input", function(){
let texto = this.value.replace(/\n/gi, "<br>");
texto = texto.replace(/(.*<p>.*)*(?:<br(?:\s\/)?>){2}(.*)(<\/p>)*/gi, "$1$3<p>$2</p>");
texto = texto.replace(/-{4,8}/g, "<hr>");
p1.innerHTML = texto;
});
}
让我先回答正则表达式问题,但警告您这是错误的策略,只是因为您的评论澄清了它适用于这些简单的情况。
它可以匹配所有文本,直到找到以下标签之一:
<br><br>
或</p>
. 也就是说,我建议的策略是制作一个正则表达式来匹配标签外的所有文本.........直到您找到搜索到的标签或文本的结尾。
这样做的主要思想是捕捉我们感兴趣的文本,并消费pre标签和post标签。
如您所见,我们将我们希望它捕获的所有内容放在括号中,以便在进行替换时保留它(用
$1
)。常规短语:
该功能将是:
但同样,有很多案例会打破这种模式,我真的建议您使用 DOM 解决它并提出一个您可以继续前进的新问题。
虽然我选择了上面的答案作为最佳答案,但我只想添加一个我通过测试发现的选项。
它在 Mozilla 和 Vivaldi 上都经过测试。
带有正则表达式的函数如下所示:
通过不关闭替换中的 <p> 标记,浏览器在将带有新替换的 HTML 插入到 innerHTML 时会自动关闭它。
这允许在创建新段落时,您可以继续在其中书写,就好像我们在段落内移动了光标一样。它将继续写在新的段落中,直到我们再次引入 2 个连续的 <br><br>。
因此,将文本中的以下 HTML 放在已经替换了值的 innerHTML 中时会如下所示<br><br>
没有替代品
替换后它看起来像这样:
虽然寻找这种不关闭标签的行为来实现这个目标和其他一些可能不是最合适的。