如何在json行的每个开头之前添加编号（格式）

Question

这是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>';
        });
    }
}

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