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

Question

我通常使用下面的代码片段从我的 < pre > block 中删除第一个缩进，效果很好。

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

我还尝试格式化 data.result，但这也不起作用

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

这是代码:

<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>

编辑:JS Fiddle Here https://jsfiddle.net/ajwill0/ty7s39ko/2/

奇怪的是，在 fiddle 中这两个选项都不起作用，我在应该没有的地方有很大的缩进......

Answer 1

因此，实际问题是 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 来实现相同的目的