如何更改新添加的脚本标签内容的缩进
Posted
技术标签:
【中文标题】如何更改新添加的脚本标签内容的缩进【英文标题】：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(/"/g, "'");
return (
'<!DOCTYPE HTML>\n<html>' +
unescapedHTML +
'</html>'
);
;
如何做到这一点？请建议，下面的答案没有多大帮助...... 如果我能以某种方式改善这个问题，请告诉我。
【问题讨论】：
抱歉，您为什么要这样做？大多数时候，当人们完成他们的代码时，他们会最小化它以拥有更小的文件，而不是相反......我只是好奇...... @BozidarSikanjic - 在构建过程中正确缩小文件，但我需要在某些编辑器中显示此文件... 【参考方案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以上是关于如何更改新添加的脚本标签内容的缩进的主要内容，如果未能解决你的问题，请参考以下文章