2016-03-28 4 views
5

次のコードを使用してコンテンツをHTMLファイルに挿入するには 現在、次のコードが動作していて、最初の既存スクリプトの後に新しいスクリプトが挿入されます。問題は、コンテンツがインデントされていないことです新しいスクリプトタグコンテンツのインデントを変更するには

私は、次のようにインデントするためにそれを変更したい

<script> var keyOfFilesArray = Object.keys(data)[0]; var filesArray = data[keyOfFilesArray];   </script> 

(あなたは1行でそのを見ることができるように)これは、新たな追加スクリプトの出力です:

  1. 秒追加のオープンスクリプトタグがします
  2. VARSこの
ようになり次々に挿入されるべき最初のスクリプトの 開閉タグ後に挿入ライン こと
<script> 
var keyOfFilesArray = Object.keys(data)[0]; 
var filesArray = data[keyOfFilesArray]; 
</script> 

私はそれをどのように行うことができますか?私は、これは、JSコード、それがいかに

btn.onclick = function(e){ 
debugger; 
var innerhtml = [ 
     ' var keyOfFilesArray = Object.keys(data)[0];', 
     ' var filesArray = data[keyOfFilesArray];   ' 
    ].join(''); 

    var html = process(input.defaultValue,innerhtml); 
    output.value = html; 

} 


function process(html,innerhtml) { 
    var escapedHTML = html 
     .replace(/body/g, 'body$') 
     .replace(/head/g, 'head$'); 
    sandbox.innerHTML = escapedHTML; 

    var script = sandbox.querySelectorAll('#app-ux-bootstrap')[0]; 

    var newScript = document.createElement('script'); 
    newScript.innerText = innerhtml; 
    script.parentNode.insertBefore(newScript, script.nextSibling); 

    var unescapedHTML = sandbox.innerHTML 
     .replace(/body\$/g, 'body') 
     .replace(/head\$/g, 'head') 
     .replace(/&quot;/g, "'"); 

    return (
     '<!DOCTYPE HTML>\n<html>' + 
     unescapedHTML + 
     '</html>' 
    ); 

}; 

ある

https://jsfiddle.net/k32ntkr8/

...私は、n /追加する必要がありますが、わからないところにそれを挿入するための最良の方法です信じて完了?お答えください、以下の回答はあまり役に立ちません... この質問をどうにかして改善できれば教えてください。

+0

申し訳ありませんが、なぜあなたはそれをしたいのでしょうか?たいていの場合、人々がコードを完成させると、ファイルのサイズが小さくなるように最小限に抑えられます。ちょっと不思議です... –

+0

@BozidarSikanjic - ファイルのサイズを小さくするビルド中に修正しますが、これを表示する必要がありますいくつかのエディタの前にファイル... –

答えて

1

[OK]を、あなたはこの

btn.onclick = function(e){ 
debugger; 
var innerhtml = [ 
     '', 
     '  <script>', 
     '   var keyOfFilesArray = Object.keys(data)[0];', 
     '   var filesArray = data[keyOfFilesArray];   ', 
     '  <\/script>' 
    ].join('\n'); 

    var html = process(input.defaultValue,innerhtml); 
    output.value = html; 

} 

にあなたのonclickハンドラを変更し、この

var script = sandbox.querySelectorAll('#app-ux-bootstrap')[0]; 
script.parentNode.insertAdjacentHTML('afterBegin', innerhtml); 

にスクリプトを取り込むprocessの行を変更する場合は、この出力を取得する必要があります

<head> 
    <script> 
    var keyOfFilesArray = Object.keys(data)[0]; 
    var filesArray = data[keyOfFilesArray];   
    </script> 
... 
</head> 
+0

ありがとう、しかし正確にそれを行うには良い? –

+0

これを試しましたか?動作しません。 – Adjit

+0

あなたは今ここで行うことができますが、空の文字列で結合するのではなく、新しい行で結合します – gabesoft

1

これは何か?

var innerhtml = [ 
    '\tvar keyOfFilesArray = Object.keys(data)[0];', 
    '\tvar filesArray = data[keyOfFilesArray];' 
].join("\n"); 

var script_code = '<script>\n' + innerhtml + '\n<\/script>'; 

次に、script_code変数をページに表示する場所に挿入します。

https://jsfiddle.net/e72c17zg/1/

+0

、私は結合と '\ t'なしでこの内側のHTMLの内部に任意の文字列を取得すると仮定してどうすればあなたが提供する結果としてそれを作成できますか?ありがとう –

関連する問題