Good. I'm trying to do something so that every 2 <br> in a row becomes a <p></p>
I managed to get it to convert from <br><br> to <p></p> only once. But when I try to put 2 <p> in a row no more paragraphs are created.
Another thing is that I am putting the text that I get from the substitutions directly in element.innerHTML. What happens is that even if I write elements directly in the TEXTAREA these are added. Is there also a way to encode this HTML after receiving the text? What would be the best way to do all this that I want to do?
The example code would be the following. If I have the following HTML code:
<p>
Esto es un texto
<br><br>Parrafo 1
<br><br>Parrafo 2
<br><br>Parrafo3
</p>
Become:
<p>
<p>Parrafo 1</p>
<p>Parrafo 2</p>
<p>Parrafo 3</p>
</p>
And starting from the previous code I would like to be able to do that within each paragraph when I do the following:
<p>
<p>Parrafo 1 <br><br>Nuevo parrafo</p>
<p>Parrafo 2</p>
<p>Parrafo 3<br><br>Subparrafo de 3</p>
</p>
Become:
<p>
<p>Parrafo 1</p>
<p>Nuevo parrafo</p>
<p>Parrafo 2</p>
<p>Parrafo 3</p>
<p>Subparrafo de 3</p>
</p>
Or that those 2 paragraphs go at the end instead of going right after the paragraph where his
As I said, I have managed to create 2 consecutive paragraphs with their internal text, but when creating the third one, 2 BR are created with a text inside one of those 2 paragraphs. Then I changed the regular expression and now I only get 1 paragraph to be created in a row.
Anyway, I can't find the regular expression, if it is possible. Here the HTML and the 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;
});
}
Let me answer the regex question first, but warning you that it is the wrong strategy, just because of your comment clarifying that it is for these simple cases.
It can match all text until it finds one of these tags:
<br><br>or</p>. That is, the strategy that I propose is to make a regular expression that matches all the text outside a tag......until you find the searched tags or the end of the text.
The main idea of this is to capture the text we are interested in, and consume the pre tag and post tag.
As you can see, we put everything we want it to capture in parentheses, in order to keep it when doing the replacement (with
$1).Regular phrase:
The function would be:
But again, there are plenty of cases that would break this pattern, and I'd really recommend you tackle it with the DOM and ask a new question that you can move forward with.
Although I chose the answer above as the optimal one, I would just like to add an option that I discovered by testing.
It is tested on both Mozilla and Vivaldi.
The function with the regular expression would look like this:
By not closing the <p> tag in the substitution, browsers automatically close it when inserting the HTML with the new substitution into innerHTML.
This allows that when creating a new paragraph you can continue writing inside it as if we had moved the cursor inside the paragraph. It will continue to write in the new paragraph until we introduce 2 consecutive <br><br> again.
So the following HTML in text would look like this when putting it in an innerHTML having already replaced the values <br><br>
no substitution
After substituting it would look like this:
Although looking for this behavior of not closing tags to achieve this goal and some other is probably not the most appropriate.