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

标签 javascript jquery html dom

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

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

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

我想将其更改为缩进,如下所示:

  1. 第二个添加的打开脚本标签将插入到第一个脚本的结束标签之后
  2. 变量应该像这样一个接一个地插入
<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>'
    );

};

如何实现?请建议,下面的答案没有多大帮助... 如果我能以某种方式改进这个问题,请告诉我。

最佳答案

是这样的吗?

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/

关于javascript - 如何更改新添加的脚本标签内容的缩进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36265065/

相关文章:

javascript - 从单选按钮选择分配值的最佳方法

Javascript在下拉更改时设置隐藏的表单值

jquery - 单击关闭按钮停止YouTube

jquery - 计算具有相似类别的每个 td 的总和

javascript - Vue + Asp.Net MVC - 在 cshtml 属性中使用 vue Mustache

javascript - 不支持 ES6 扩展语法 IE

html - 如何模拟多个表格标题?

html - 如何删除每篇博文两边的缩进?

jquery - onchange 显示/更改部分

javascript - 我想要 jquery 可拖动脚本来记住位置