How to split a line of HTML code with multiple elements into multiple lines?

Question

I have copied and pasted from the inspect html inside chrome into an editor. But instead of splitting up the code into multiple lines with one div per line all my 100 div elements is in the same line.

How can I easily split them all up so they all get placed with one div per line?

If this is an editor thing then I am using Visual Studio Code.

The code that I pasted from chrome:

<div id="r201" class="ruta"></div><div id="r202" class="ruta"></div><div id="r203" class="ruta"></div>

How I would like it to be:

<div class="ruta"></div>
<div class="ruta"></div>
<div class="ruta"></div>
<div class="ruta"></div>
<div class="ruta"></div>

Answer 1

If it's a one time format perhaps a site like https://regexr.com can be of use.

Effectively you find every </div> in the input text and replace it with </div>\n. The \n writes a new line to give you the formatting you need.

1. Enter the regular expression <\/div> in the regex pane.
2. Enter the text you want to modify in the middle pane.
3. In the tools pane select "replace" and enter $&\n (repeat the value that was found and append \n after it.

In the output you should get the values you're looking for.

If you need something VSCode, try the prettier extension.