Как покрасить определённую часть строки?

Question

[lena_tihonova_bl]

Нужно вставить span в определённую часть строки, чтобы потом её покрасить. Поискав решение, я наткнулся на метод, позволяющий вставить span с помощью regexp:

let re = new RegExp(word, "g");
text.innerHTML = text.innerHTML.replace(re, `<span>${word}</span>`);

Но, к сожалению, мне это не подошло, поскольку данная часть строки у меня может встретиться несколько раз, причём изменить нужно только одну. Например: "привет привет привет привет привет". Как можно изменить, к примеру, именно четвёртое слово? Если взять что-то типа "/"привет"{4,4}/", то ничего не получится. Есть ли какие-нибудь другие варианты или действия с regexp?

Answer 1

[Antowa Kartowa]

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

Например вот функция оборачивающая исключительно в span. Один из недостатков функции в том, что она опирается на `matchAll` метод поддерживаемый вроде бы пока еще не всеми браузерами.

Параметры:
- строка в которой производится поиск и замена
- искомая строка (может быть регулярное выражение, но обязательно с `g` флагом)
- необязательное значение класса для span (чтоб не печатать нужно любое falthy значение - null, '', 0, false)
- необязательное значение порядкового индекса найденного совпадения для оборачивания. по умолчанию - `0`. может иметь негативное значе `-1` для последнего значения сколько бы их не было, `-2` для предпоследнего и тд.

const spanText = (str, pattern, className = '', index = 0) => {
  const matches = [...str.matchAll(pattern)];
  
  if (!matches.length || !matches.slice(index)[0]) return str;

  const { 0: match, index: startIndex } = matches.slice(index)[0];
  const endIndex = startIndex + match.length
  const spanOpenTag = !className ? '<span>' : `<span class="${className.toString()}">`;

  return str.slice(0, startIndex) + spanOpenTag + match + '<span>' + str.slice(endIndex);
} 

const re = new RegExp(word, 'g');
text.innerHTML = spanText(text.innerHTML, re);

Answer 2

[v3shin]

let parts = "1привет 2привет 3привет 4привет 5привет".split('привет');
parts[3] += '<span>';
parts[4] = '<span>' + parts[4];
console.log(parts.join('привет'));