在PhpStorm中将HTML转换为JavaScript字符串

Question

我希望将一些html轻松转换为PhpStorm中的连接JS字符串。

来自：

<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>

致：

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>';

理想情况下也是另一个方向。有没有机会实现这个目标？有插件吗？我可以想象一个带有一些正则表达式的宏可以做到这一点。可能吗？

可以找到其他IDE的同一问题here。或here。

Answer 1

仅使用PHPStorm，您可以使用Extra Actions插件：

• 选择所有行
• 将选区拆分为线条（ ctrl + shift + L ）
• 转到该行的开头（ home ）
• 添加加号和报价
• 转到行尾（ end ）
• 添加报价

Answer 2

您应该在JS中创建元素，然后将它们插入到DOM中，而不是将HTML转换为JS字符串。这将为您提供更多控制，而不是创建如此难以维护/读取的代码，导致更少的问题，并且可以更快地启动：

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

以上创建了以下内容：

https://jsfiddle.net/yfeLbhe4/