Convert HTML string to JavaScript text keeping indentation

Question

I want to target or match only the first occurrence per line

Typical Scenario:

I have an HTML Structure that I am using in JavaScript.

<ul>
    <li> ABC </li>
    <li> DEF </li>
    <li> GHI <span> GHI-SPAAN </span> </li>
</ul>

To convert the above into a string, in my editor, I can simply Find & replace EOL with a '+ and beginning of line with a ' so that the code would be

var tpl = ''+
    '<ul> '+
    '<li> ABC </li> '+
    '<li> DEF </li> '+
    '<li> GHI <span> GHI-SPAAN </span> </li> '+
    '</ul> ';

But you see, I loose the indentation when I replace the beginning of line with '<

So I want to uniquely target (target only the first occurrence of < and replace with '< )

I am using KOMODO edit and Sublime Text 2

Who cares about the indentation of markup that is inside a string anyway? — ThiefMaster
– ThiefMaster, Commented Apr 25, 2012 at 6:25
@Blender, Oops! Sorry for not being clear. I want to store some HTML in a variable (not taken from DOM, I am gonna create it). I want to copy paste it from some HTML file and save myself, the typing efforts — Om Shankar
– Om Shankar, Commented Apr 30, 2012 at 17:06
@ThiefMaster, I want to keep the indentation so that it looks good to the one who reads code, and follow the standard — Om Shankar
– Om Shankar, Commented Apr 30, 2012 at 17:15

georg · Accepted Answer · 2012-04-25 07:37:07Z

1

I'm not a KomodoEdit user, but I tried these replacements and they worked:

starting quote: replace ^(\s*)< with \1<
ending quote: replace >\s*$ with >' +

Hope this helps.

answered Apr 25, 2012 at 7:37

georg

216k57 gold badges324 silver badges401 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Om Shankar Over a year ago

The \1 was what I was looking for - It keeps your matches. Thanks for showing understanding ability - he he

Chuck Le Butt · Accepted Answer · 2016-07-13 14:51:12Z

0

Rather than converting HTML to a JS string, it would be much better to create the elements in JS and put them in the DOM. This would give you much more control, not create such a difficult to maintain/read code, and be much faster (amongst other benefits):

var outerDiv = document.createElement("div");
outerDiv.className = "spa-shell-head";

var innerDivLogo = document.createElement("div");
innerDivLogo.className = "spa-shell-head-logo";

var innerDivAcct = document.createElement("div");
innerDivAcct.className = "spa-shell-head-acct";

var innerDivSearch = document.createElement("div");
innerDivSearch.className = "spa-shell-head-search";

outerDiv.appendChild(innerDivLogo);
outerDiv.appendChild(innerDivAcct);
outerDiv.appendChild(innerDivSearch);
document.body.appendChild(outerDiv);

The above creates the following:

https://jsfiddle.net/yfeLbhe4/

answered Jul 13, 2016 at 14:51

Chuck Le Butt

49k62 gold badges213 silver badges299 bronze badges

5 Comments

Om Shankar Over a year ago

That was only an example, the main question was to maintain indentation.

Chuck Le Butt Over a year ago

@OmShankar Why would you wish to maintain indentation?

Om Shankar Over a year ago

Single page apps, templates. Scala map methods. XML fragments, YAML configuration, etc.

Chuck Le Butt Over a year ago

@OmShankar Why not write something that reformats the code before it's displayed? Much less likely to produce errors in formatting if it's not left up to the user.

Om Shankar Over a year ago

you didn't get my comment. I just wanted to say that in a normal day to day coding (including back end) you need indentation, not just HTML files. Now if you do find-and-replace like the example I gave above, you would loose indentation in the code file. So there should be a way to maintain the formatting of any code after such operation. Which is something I found in the answer.

Collectives™ on Stack Overflow

Convert HTML string to JavaScript text keeping indentation

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related