javascript - インデントを維持しながらHTML文字列をJavaScriptテキストに変換します

Question

1行あたり最初のオカレンスのみをターゲットまたは一致させたい

典型的なシナリオ：

JavaScriptで使用しているHTML構造があります。

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

上記を文字列に変換するには、私のエディターで、EOLを検索して置き換え'+ 、行の先頭をaに置き換え'て、コードが次のようになるようにします。

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

しかし、ほら、行頭を次のように置き換えると、インデントが失われます。'<

だから私はユニークにターゲットにしたい（最初に出現したものだけをターゲットにして<、に置き換える'<）

KOMODOeditとSublimeText2を使用しています

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/