如何在每个json行的开头添加一个编号（格式化）答案

【问题标题】：How to add a numbering before each start of row of json (formatted)如何在每个json行的开头添加一个编号（格式化）
【发布时间】：2019-01-13 02:10:37
【问题描述】：

这是 Stackblitz 链接：- https://stackblitz.com/edit/angular-gqz1hr?file=src/app/app.component.html

我正在努力实现：-

1) 我正在尝试在每个 json 行（行号）之前添加编号，如图所示。

2) 在编号列中添加不同的背景色，即#000。

.html

<div  class="col-12 rmpm" style="background:#292a30;height: 300px;">
 <pre id="responseSection" *ngIf="JSON" [innerHtml]="JSON"></pre>
</div>

.ts

constructor(){
  let json = {'key':2 ,'key2':3}
 this.output(this.syntaxHighlight(JSON.stringify(json, undefined, 4)));
}

output(inp) {
        this.JSON = inp;
    }
  syntaxHighlight(json) {
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }
}

【问题讨论】：

@CertainPerformance 可用here。
为什么要整理您的数据？您在这里有两个不同的数据集。 1：行号，2：JSON。它们是不相关的，因为每个行号都会存在，而与 JSON 数据无关。因此，解决这个小难题的最佳方法是有效地使用您的网格系统。我看到了col-12 - 将其设为col-11 并为行号提供一列。然后彼此独立地填充它们。您在这里的问题是认为行号必须与 JSON 的特定位相关，而这里不是这样。只是一个想法。
@Randy Casburn，能否请您展示您的方法，以便包含序列号的列的样式变得容易。
虽然您已经接受了答案，但我会提供帮助。首先，您的 RegEx 匹配函数会删除您的 HTML 标记，因此您不会得到任何突出显示。你需要调查一下。由于您的 syntaxHighlight() 函数什么都不做，所以我忽略了该功能。所以这里有一个堆栈闪电战，它清理了一切并正确使用引导程序：stackblitz.com/edit/angular-mb5bdb如果你还有其他问题要问我，欢迎在这里与我开始聊天或在 LinkedIn 上找到我
谢谢，但这里的序列号显示不正确。

标签： javascript angular

【解决方案1】：

一种选择是在最后执行另一个.replace，使用一个回调函数，每次检索并递增一个line 变量：

let line = 1;
// ...
return json.replace(...
// ...
.replace(/^/gm, () => line++ + '  ');

但是这样一来，第 9 行和第 10 行、第 99 行和第 100 行之间的间距就不合适了，依此类推，因此您可以改用 padEnd：

const withHtml = json.replace( ...
// ...
const totalLines = withHtml.match(/\n/g).length;
const padLength = 5 + Math.floor(totalLines / 10);
return withHtml.replace(/^/gm, () => String(line++).padEnd(padLength));

若要为行号添加颜色，请插入一个 HTML 字符串，例如

return withHtml.replace(
  /^/gm,
  () => `<span class="line-number">${String(line++).padEnd(padLength)}</span>`
);

并根据需要设置.line-number 的样式。

【讨论】：

谢谢，但我不能像图片中那样将背景颜色添加到编号列中。
我遇到了一些问题。你能在我的 Stackblitz 上更新一下吗？
只需根据需要复制答案和样式中的文本，例如 stackblitz.com/edit/angular-kspdah ，但可能有更好的 CSS 方式来完成它