如何更改新添加的脚本标签内容的缩进答案

【问题标题】：How to change the indentation of new added script tag content如何更改新添加的脚本标签内容的缩进
【发布时间】：2016-07-15 20:57:19
【问题描述】：

我正在使用以下代码将带有内容的新脚本插入到 HTML 文件中，目前以下代码正在运行，并且在第一个现有脚本之后插入了新脚本，问题是内容没有缩进

例如这是新添加的脚本的输出（你可以在一行中看到它）

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

我想把它改成如下缩进：

第二个添加的打开脚本标记将插入在第一个脚本的关闭标记之后
vars 应该一个接一个地插入才能像这样

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

我该怎么做？我相信我需要添加 /n 但不确定在哪里插入它的最佳方式...

https://jsfiddle.net/k32ntkr8/

这是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>'
    );

};

如何做到这一点？请建议，下面的答案没有多大帮助...... 如果我能以某种方式改善这个问题，请告诉我。

【问题讨论】：

抱歉，您为什么要这样做？大多数时候，当人们完成他们的代码时，他们会最小化它以拥有更小的文件，而不是相反......我只是好奇......
@BozidarSikanjic - 在构建过程中正确缩小文件，但我需要在某些编辑器中显示此文件...

标签： javascript jquery html dom

【解决方案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/

【讨论】：

它可以是通用的吗，我的意思是假设我在这个内部 html 中得到任何字符串而没有连接和 '\t' 我如何创建它作为您提供的结果？谢谢先生跨度>

【解决方案2】：

好的，如果您将 onclick 处理程序更改为此

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;

}

并将填充脚本的process 行更改为此

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

你应该得到这个输出

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

【讨论】：

谢谢，但是哪里更好呢？
你可以在你现在做的地方做，但不要用空字符串加入新行
我不希望它在 var 声明(innerhtml) 之后，另外我需要新插入的脚本标签位于第一个结束脚本标签下？如果对你有用，你能更新一下 jsFiddle 吗？谢谢先生
@gabesoft - 你能帮忙吗，你知道如何处理这个吗？谢谢楼主！
更新了答案和jsFiddle