Блог

Главная - Вопросы по программированию - Сопоставление критериев в пределах одной строки для добавления HTML и замены исходной строки

Сопоставление критериев в пределах одной строки для добавления HTML и замены исходной строки

#javascript #regex #angular #pipe

#javascript #регулярное выражение #angular #канал

Вопрос:

Вот пример StackBlitz. Что я сделал до сих пор.

Я создаю угловое приложение. К сожалению, мне было присвоено огромное значение одной строки. Части этой строки должны быть выделены «жирным шрифтом». Я определил, что после каждого : (двоеточия) вплоть до каждой новой строки n должна быть вставка <strong> тегов.

Пример строки

 "Football: greatnCricket: oknTennis: Poor"

В настоящее время это выглядит так:

Футбол: отлично
Крикет: хорошо
Теннис: плохо

Но нужно, чтобы это выглядело так:

Футбол: отлично
Крикет: ок
Теннис: плохой

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

Возьмите это отфильтрованное слово или слова и добавьте к нему строгие теги, а затем замените соответствующие слова обратно в исходную строку.

Я почти на месте, однако я не могу правильно выполнить цикл, кажется, что он идентифицирует " " , а также применяет каждое совпадающее слово ко всем совпадениям, поэтому я бы вернул только одно. Итак, я возвращаюсь:

Футбол:
Крикет:
Теннис:

или

Футбол: ок , ок
Крикет: ок , ок
Теннис: ок , ок

Вот пример StackBlitz. Что я сделал до сих пор.

boldPipe.pipe.ts

 import { Pipe, PipeTransform, Sanitizer, SecurityContext } from '@angular/core';
import { noop } from 'rxjs';

@Pipe({
    name: 'boldSpan'
})
export class BoldSpanPipe implements PipeTransform {
    constructor(private sanitizer: Sanitizer) {}

    transform(value: string): any {

        const regex = /[^:]*$/gim;
        return this.sanitize(this.replace(value, regex));
    }

    replace(str, regex) {
        const matched = str.match(regex);
        debugger;
        matched
            ? matched.forEach(foundString => {
                    foundString = foundString.substring(1, foundString.length);

                    str = str.replace(regex, `<strong>${foundString}</strong>`);

              })
            : noop;
        return str;
    }

    sanitize(str) {

        return this.sanitizer.sanitize(SecurityContext.HTML, str);
    }
}

Комментарии:

1. Совет: чтобы новая строка вступала в силу при отображении, добавьте перед ней двойной пробел.

2. Обратите внимание, что это [^:]* будет жадно соответствовать новым строкам вплоть до следующего : . Вы можете изменить его на отложенное совпадение [^:]*?$ , и ваше будет работать.

Ответ №1:

Вам нужно сопоставить хотя бы один символ, отличный от двоеточия, с /[^:] $/gm , или даже /[^:rn] $/ , а затем заменить <strong>$amp;</strong> шаблоном, где $amp; относится ко всему значению соответствия:

 export class BoldSpanPipe implements PipeTransform {
    constructor(private sanitizer: Sanitizer) {}

    transform(value: string): any {
        const regex = /[^:] $/gm;
        return this.sanitize(this.replace(value, regex));
    }

    replace(str, regex) {
        return str.replace(regex, '<strong>$amp;</strong>');
    }

    sanitize(str) {
        return this.sanitizer.sanitize(SecurityContext.HTML, str);
    }
}

Ответ №2:

Просто str.replace(/:(.*)/g, ":<strong>$1</strong>"
Этот способ не беспокоится о новых строках.