javascript - 如何在 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样式。