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

我通常使用下面的代码片段从我的

块中删除第一个缩进，效果很好

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

我还尝试格式化data.result，但也没有成功

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

<pre><code>This is page rendered informatiom</code></pre>

<pre id="output_block"><code id="results"></code></pre>

代码如下：

<script>
    $("pre").each(function(){
        var html = $(this).html();
        var pattern = html.match(/\s*\n[\t\s]*/);
        $(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[\t\s]*/);
                            $(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>


$（“pre”）。每个（函数（）{
var html=$（this.html（）；
var pattern=html.match（/\s*\n[\t\s]*/）；
$（this.html（html.replace（新的RegExp（模式，“g”），'\n'））；
});
var waiting=$（'#waiting'）.hide（）
{%if任务_id%}
var task_id=“{{task_id}}”；
var结果=$（“#结果”）；
获取任务信息（任务id）；
函数获取任务信息（任务id）{
$.ajax({
键入：“get”，
url:'/monitoring/get_task_info/'+task_id，
数据：{'task_id'：task_id}，
成功：功能（数据）{
html（“”）；
如果（data.state==“挂起”）{
waiting.show（）；
}
else if（data.state=='SUCCESS'）{
等待。隐藏（）；
html（data.result）；
$（“pre”）。每个（函数（）{
var html=$（this.html（）；
var pattern=html.match（/\s*\n[\t\s]*/）；
$（this.html（html.replace（新的RegExp（模式，“g”），'\n'））；
});
}
如果（data.state！=“成功”）{
setTimeout（函数（）{
获取任务信息（任务id）
}, 2000);
}
},
错误：函数（数据）{
html（“错误！”）；
}
});
}
{%endif%}

编辑：JS小提琴在这里

奇怪的是，在fiddle中，这两个选项都不起作用，我有一个大的缩进，应该没有…
所以，实际的问题是
pre
标记的结尾和
code
标记的开头之间显示空白

选项1：注释中@Swati提到的css

选项2：编辑HTML并删除所有空白

e、 g

JSFIDLE示例：

---

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

您可以创建一个JSFIDLE来解决您的问题，以便我们可以重现它吗？如果我是你，我会创建一个JSFIDLE，在这里我会有一个例子，其中你的pre被很好地配置了，这样我们就知道你的期望是什么，而且，另一个例子会出现在JSFIDLE上，它不会起作用。你可以通过Jest或一些自定义的setTimeout代码在Fiddle中模拟AJAX调用。我添加了一个Fiddle，奇怪的是，这两个选项都不能通过渲染html或通过java插入我有一个大缩进我不确定我是否正确理解了你的问题，但是如果我用

div

块替换你的

pre

块，左边多余的空间消失了！只需在css中使用

pre{white space:pre-line；}

，看看是否有效。这里有工作