javascript - 将 HTML 字符串转换为 JavaScript 文本保持缩进

Question

我只想定位或匹配每行的第一次出现

典型场景：

我有一个在 JavaScript 中使用的 HTML 结构。

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

要将以上内容转换为字符串，在我的编辑器中，我可以简单地用 a 查找并替换 EOL 并用 a 替换'+ 行首，'这样代码就可以

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

但是你看，当我用'<

所以我想唯一定位（只定位第一次出现<并替换为'<）

我正在使用 KOMODO 编辑和 Sublime Text 2

Answer 1

我不是 KomodoEdit 用户，但我尝试了这些替代品并且它们奏效了：

• 起始报价：替换^(\s*)<为\1<
• 结束引号：替换>\s*$为>' +

希望这可以帮助。

Answer 2

与其将 HTML 转换为 JS 字符串，不如在 JS 中创建元素并将它们放入 DOM 中要好得多。这将为您提供更多控制权，不会创建如此难以维护/阅读的代码，并且速度更快（以及其他好处）：

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

以上创建以下内容：

https://jsfiddle.net/yfeLbhe4/