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

Question

我只想定位或匹配每行的第一个匹配项

典型场景：

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

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

上述转换为字符串，在我的编辑，我可以简单地查找和使用替代EOL '+和初线与'使代码会

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

但是你看，我失去了压痕 ，当我替换行的开头'<

因此，我想唯一地定位（仅定位<的第一个匹配项，并替换为'< ）

我正在使用KOMODO edit和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/