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