Link to home
Start Free TrialLog in
Avatar of Pedro Chagas
Pedro ChagasFlag for Portugal

asked on

Line Break in all div's html with JavaScript

Hi E's,
I try to get a solution for make like a simple custom beautify html.
In practice, every time the script found a div close (</div>), create a line break, like this:
<script>
var code_html = '<div id="all"><div class="one">hello, this is a test</div><div class="two">hello, test again</div><div class="one">hello, this is great</div></div>';
</script>

Open in new window

The objective is transform the variable code_html in this (create a line break for each </div>):
<script>
var code_html = '<div id="all"><div class="one">hello, this is a test</div>
<div class="two">hello, test again</div>
<div class="one">hello, this is great</div>
</div>';
</script>

Open in new window


How I can do that transformation i JavaScript, or in jQuery?

The best regards,
JC
Avatar of leakim971
leakim971
Flag of Guadeloupe image

you want to create this in your code itself ?
Avatar of Pedro Chagas

ASKER

Hi @Leakim,
Yes.
I create my own code editor for compose some articles in html, but every time I save the code comes like this:
<div id="David_Bowie_Psaablo_Picasso"><div class="row"><div class="col s1 m3 l3 xl3"></div><div class="col s10 m6 l6 xl6"><div class="video-container"><iframe width="853" height="480" title="David Bowie - Psaablo Picasso" src="https://www.youtube.com/embed/Gv9eWsKHazk?rel=0&showinfo=0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div></div><div class="col s1 m3 l3 xl3"></div></div></div>
I have above code inside a javascript variable, and I want organize/beautify my code.

Regards, JC
OK, so we just need to add a \n after each </div>, check here and confirm please : https://jsfiddle.net/6j7erx18/

$("body").append("<div>one</div><div>two</div><div>three</div>");

$("body").append("\n<div>one</div>\n<div>two</div>\n<div>three</div>");

// checking :
$("<textarea/>").val($("body").html()).appendTo("body");

Open in new window

Hello again,
I don't understand your solution.
First, I generate dynamic code, because that I don't known where I have to make the line break, so the script have to detect "</div>", and do automatically the line break in every </div>.
Did I express myself wrong?

~JC
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Good morning.
I will try your solution this night.
Please wait.

~ JC
Thank you @leakim!
Regards.
you welcome!