在Ajax将数据插入html代码块后,格式化预块以删除第一个缩进



我通常使用下面的代码段来删除我的<pre><code>块,工作正常。

然而,我使用Ajax调用来填充代码块的html,当它完成时,它不再格式化,我也尝试在填充结果后放入预格式化代码,但它仍然在第一行上有大缩进

我还试着用格式化数据.result,但也不起作用

var pattern = data.result.match(/s*n[ts]*/);
results.html(data.result.replace(new RegExp(pattern, "g"),'n'));

这是代码:

<script>
$("pre").each(function(){
var html = $(this).html();
var pattern = html.match(/s*n[ts]*/);
$(this).html(html.replace(new RegExp(pattern, "g"),'n'));
});
var waiting = $('#waiting').hide()
{% if task_id %}
var task_id = "{{ task_id }}";
var results = $('#results');
get_task_info(task_id);
function get_task_info(task_id) {
$.ajax({
type: 'get',
url: '/monitoring/get_task_info/'+task_id,
data: {'task_id': task_id},
success: function (data) {
results.html('');
if (data.state == 'PENDING') {
waiting.show();
}
else if(data.state == 'SUCCESS'){
waiting.hide();
results.html(data.result);
$("pre").each(function(){
var html = $(this).html();
var pattern = html.match(/s*n[ts]*/);
$(this).html(html.replace(new RegExp(pattern, "g"),'n'));
});
}
if (data.state != 'SUCCESS') {
setTimeout(function () {
get_task_info(task_id)
}, 2000);
}
},
error: function (data) {
results.html("Error!");
}
});
}
{% endif %}
</script>

编辑:JS Fiddle在这里https://jsfiddle.net/ajwill0/ty7s39ko/2/

奇怪的是,在小提琴中,两个选项都不起作用,我有一个大凹痕,应该没有。。。

因此,实际问题是pre标签结束和code标签开始之间显示空白

选项1:@Swati在评论中提到的css

选项2:编辑HTML并删除任何空白

例如

<pre><code>This is page rendered informatiom</code></pre>
<pre id="output_block"><code id="results"></code></pre>

JsFiddle示例:https://jsfiddle.net/Lar916t0/1/

如果您不允许/无法编辑HTML,则需要使用JavaScript 实现相同的功能

最新更新