Как добавить нумерацию перед каждым началом строки json (отформатировано)

Вот ссылка на 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 Доступно здесь.

— 13.01.2019 03:14

Зачем искажать ваши данные? У вас есть два разных набора данных. 1: номера строк, 2: JSON. Они не связаны, поскольку каждый номер строки будет существовать без учета данных JSON. Поэтому лучший способ решить эту небольшую загадку - эффективно использовать сетку. Вижу col-12 - сделайте col-11 и дайте столбец номерам строк. Затем заполните их независимо друг от друга. Ваша проблема здесь в том, что номер строки должен относиться к определенному биту JSON, а здесь это неверно. Просто мысль.

— 13.01.2019 03:32

@Randy Casburn, не могли бы вы показать свой подход, чтобы стилизовать столбец, содержащий серийный номер, стало легко.

— 13.01.2019 15:43

Хотя вы уже приняли ответ, я помогу. Во-первых, ваша функция соответствия RegEx удаляет вашу разметку HTML, поэтому вы не получите выделения. Вам нужно будет это изучить. Поскольку ваша функция syntaxHighlight() ничего не делает, я проигнорировал эту функцию. Итак, вот stackblitz, который очищает вещи и правильно использует бутстрап: stackblitz.com/edit/angular-mb5bdb Если у вас есть другие вопросы ко мне, вы можете начать чат со мной здесь или найти меня в LinkedIn

— 13.01.2019 18:34

Спасибо, но здесь серийный номер отображается неправильно.

— 13.01.2019 19:10

javascript angular

13.01.2019 03:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

364

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 по желанию.

Спасибо, но я не могу добавить backgroundColor в столбец нумерации, как показано на изображении.

— 13.01.2019 03:25

У меня проблема. Не могли бы вы обновить это на моем Stackblitz.

— 13.01.2019 03:31

Просто скопируйте текст в ответе и задайте желаемый стиль, например stackblitz.com/edit/angular-kspdah, возможно, есть лучший способ сделать это с помощью CSS.

— 13.01.2019 03:36

13.01.2019 03:21