Как обернуть текст в тег, зная его textContent?

Рейтинг: 0Ответов: 1Опубликовано: 11.05.2023

Как в строке

Lorem ipsum <strong>dolor</strong> sit amet

Обернуть в тег <i></i> текст ipsum dolor? Вместо тега <strong> может быть любой другой (и не один).

В общем: как, зная текст как строку, оборачивать эту строку в html-коде в любые теги, при этом не думая о корреляции с уже имеющимися тегами?

javascript html
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Вот что-то такое придумал:

const initialStr = 'Lorem ipsum <strong>dolor</strong> sit amet'
const toItalic = 'ipsum dolor'

const result = italic(initialStr, toItalic)

console.log(result)

function italic(str, toReplace) {
  const reWithTags = new RegExp(
    toReplace.replace(
      /\w+$|^\w+|\w+\s+/g,
      m => '(<.*?>)?' + m + '(<.*?>)?'
    )
  )

  return str.replace(reWithTags, m => '<i>' + m + '</i>')
}

В общем работает это так:

  • Создаём новое регулярное выражение из строки которую мы должны изменить. (Каждое слово оборачивается в (<.*?>)?СЛОВО(<.*?>)?, то-есть оно может быть окружено в какой-то тег)
  • Далее мы заменяем строку у слов, у которых может быть тег, на строку, окружённую в нужный там тег (в данном случае <i>).

Стоит отметить что это будет работать только с английским текстом, для русского текста нужно составлять другое выражение, вот такое:

/[А-ЯЁа-яё]+$|^[А-ЯЁа-яё]+|[А-ЯЁа-яё]+\s+/g

Можно немного изменить функцию и сделать её применение более широкой:

const initialStr = 'Lorem ipsum <strong>dolor</strong> sit amet'
const toReplaceStr = 'ipsum dolor'

const initialStrRu = 'Лорем ипсум <strong>долор</strong> сит амет'
const toReplaceStrRu = 'ипсум долор'

const result = envelopInTag(initialStr, toReplaceStr, 'i')
const resultRu = envelopInTag(initialStrRu, toReplaceStrRu, 'i')

console.log(result)
console.log(resultRu)

function envelopInTag(str, toReplace, tagName) {
  const reWithTags = new RegExp(
    toReplace.replace(
      /[А-ЯЁа-яёa-zA-Z]+$|^[А-ЯЁа-яёa-zA-Z]+|[А-ЯЁа-яёa-zA-Z]+\s+/g,
      m => '(<.*?>)?' + m + '(<.*?>)?'
    )
  )

  return str.replace(reWithTags, m => `<${tagName}>` + m + `</${tagName}>`)
}