Converting HTML to JavaScript string in PhpStorm

Question

I'd like to convert some html easily into concatenated JS strings in PhpStorm.

From:

<div class="spa-shell-head">
  <div class="spa-shell-head-logo"></div>
  <div class="spa-shell-head-acct"></div>
  <div class="spa-shell-head-search"></div>
</div>

To:

var main_html = ''
+ '<div class="spa-shell-head">'
+ '  <div class="spa-shell-head-logo"></div>'
+ '  <div class="spa-shell-head-acct"></div>'
+ '  <div class="spa-shell-head-search"></div>'
+ '</div>';

Ideally into the other direction as well. Is there any chance to achieve this? With a plugin? I could imagine that a macro with some regex could do it. Is it possbile?

Same question for other IDE can be found here. Or here.

use mustachejs and forget about code inlining in JS cloud.githubusercontent.com/assets/288977/8779228/… — num8er
– num8er, Commented Jul 13, 2016 at 14:11
This is really not good practice. It's much better to create the elements in JS and insert them into the DOM. — Chuck Le Butt
– Chuck Le Butt, Commented Jul 13, 2016 at 14:54

Chuck Le Butt · Accepted Answer · 2016-07-13 14:55:23Z

1

Using only PHPStorm, you can use the Extra Actions plugin:

Select all your lines
Split the selection into lines (ctrl + shift + L)
Go to the beginning of the line (home)
Add a plus sign and a quote
Go to the end of the line (end)
Add a quote

edited Jul 13, 2016 at 14:55

Chuck Le Butt

49k62 gold badges213 silver badges299 bronze badges

answered Jul 13, 2016 at 14:13

Iso

3,23825 silver badges31 bronze badges

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

1 Comment

robsch Over a year ago

The second step is why the plugin is required. Can be also done with the mouse when this plugin isn't installed (Column selection mode in Edit menu).

Chuck Le Butt · Accepted Answer · 2016-07-13 15:02:53Z

0

Rather than converting HTML to a JS string, you should really create your elements in JS and then insert them into the DOM. This would give you much more control, not create such a difficult to maintain/read code, cause less problems, and be much faster to boot:

var outerDiv = document.createElement("div"); // Create a div
outerDiv.className = "spa-shell-head"; // Give it a class

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); // Append into original div
outerDiv.appendChild(innerDivAcct);
outerDiv.appendChild(innerDivSearch);

document.body.appendChild(outerDiv); // Add to page

The above creates the following:

https://jsfiddle.net/yfeLbhe4/

edited Jul 13, 2016 at 15:02

answered Jul 13, 2016 at 14:44

Chuck Le Butt

49k62 gold badges213 silver badges299 bronze badges

1 Comment

robsch Over a year ago

The HTML is more readable than the JS code, IMO. I would consider this if I get performance issues.

Collectives™ on Stack Overflow

Converting HTML to JavaScript string in PhpStorm

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related