Fatal编程技术网
  • javascript/
  • Javascript 如何更改新添加的脚本标记内容的缩进

Javascript 如何更改新添加的脚本标记内容的缩进

javascript jquery html dom

Javascript 如何更改新添加的脚本标记内容的缩进,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我使用以下代码将包含内容的新脚本插入HTML文件， 当前，以下代码正在运行，新脚本插入到第一个现有脚本之后，问题是内容没有缩进 e、 g.这是新添加脚本的输出（正如您在一行中看到的） var-keyOfFilesArray=Object.keys（数据）[0]；var filesArray=data[keyOfFilesArray]； 我想将其更改为缩进，如下所示： 添加的第二个打开脚本标记将插入第一个脚本的关闭标记之后的第行 变量应该像这样一个接一个地插入 var keyOfFilesAr

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

e、 g.这是新添加脚本的输出（正如您在一行中看到的）

var-keyOfFilesArray=Object.keys（数据）[0]；var filesArray=data[keyOfFilesArray]；
我想将其更改为缩进，如下所示：

  • 添加的第二个打开脚本标记将插入第一个脚本的关闭标记之后的第行
  • 变量应该像这样一个接一个地插入
    • 
var keyOfFilesArray=Object.keys（数据）[0]；
var filesArray=data[keyOfFilesArray]；
    我怎么能做到？我相信我需要添加/n，但不确定在哪里插入它的最佳方式

    这是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(/"/g, "'");

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

};

    btn.onclick=函数（e）{
调试器；
var innerhtml=[
'var keyOfFilesArray=Object.keys（data）[0]；'，
'var filesArray=data[keyOfFilesArray]；'
].加入（“”）；
var html=进程（input.defaultValue，innerhtml）；
output.value=html；
}
函数过程（html、innerhtml）{
var escapedHTML=html
.replace（/body/g，“body$”）
.替换（/head/g，“head$”）；
sandbox.innerHTML=转义HTML；
var script=sandbox.querySelectorAll（“#app-ux引导”）[0]；
var newScript=document.createElement（'script'）；
newScript.innerText=innerhtml；
script.parentNode.insertBefore（newScript，script.nextSibling）；
var unescapedHTML=sandbox.innerHTML
.替换（/body\$/g，“body”）
.替换（/head\$/g，“head”）
.替换（/“/g，”）；
返回(
“\n”+
非景观DHTML+
''
);
};
    如何做到？请建议，下面的答案没有多大帮助。。。
    如果我能以某种方式改进这个问题，请让我知道。

    好的，如果您将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;

}
    你应该得到这个输出

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

    
var keyOfFilesArray=Object.keys（数据）[0]；
var filesArray=data[keyOfFilesArray]；
...
    像这样的东西

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

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

    var innerhtml=[
“\tvar-keyOfFilesArray=Object.keys（数据）[0]；”，
'\tvar filesArray=data[keyOfFilesArray]；'
].加入（“\n”）；
var script_code='\n'+innerhtml+'\n'；
    然后只需将script_code变量插入页面上希望它出现的任何位置

    抱歉，但你为什么要这样做？大多数时候，当人们完成代码时，他们会将其最小化，以拥有更小的文件，而不是相反的…我只是好奇…@BozidarSikanjic-在构建过程中正确缩小文件，但我需要在某些编辑器中显示此文件…谢谢，但具体在哪里做更好？你可以这样做它是您现在执行的操作，但不是使用空字符串连接，而是使用新行连接。我不希望它包含在var声明（innerhtml）中之后，另外我需要新插入的脚本标记将位于第一个结束脚本标记下？如果JSFIDLE对您有效，您可以更新它吗？谢谢sir@gabesoft-你能帮忙吗？你知道怎么处理这个问题吗？谢谢你，先生！更新了答案和JSFIDDLE。它可以是通用的吗？我的意思是假设我没有连接和“\t”的内部html中的任何字符串如何创建它作为您提供的结果？谢谢先生 
     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 = [
    '\tvar keyOfFilesArray = Object.keys(data)[0];',
    '\tvar filesArray = data[keyOfFilesArray];'
].join("\n");

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