BFE.DEV # 55. Выделите ключевые слова в строке HTML

BFE.DEV как лецкод для передних разработчиков. Я использую его, чтобы практиковать мои навыки.

Эта статья о проблеме кодирования BFE.DEV # 55. Выделите ключевые слова в HTML String.

Анализ

Цель состоит в том, чтобы обернуть ключевые слова Отказ

highlightKeywords(
  'Hello FrontEnd Lovers', 
  ['Hello', 'Front', 'JavaScript']
)
// 'Hello FrontEnd Lovers'

Выглядит легко, просто ищите ключевые слова и замените их. Но это сложно, когда есть перекрывающиеся ключевые слова

highlightKeywords(
  'Hello FrontEnd Lovers', 
  ['Front', 'FrontEnd', 'JavaScript']
)
// 'Hello FrontEnd Lovers'

Идея, которую я подошел, это как это.

1. Когда мы находим ключевое слово, скажем «Фронт» В приведенном выше примере мы отслеживаем Начало и конец Отказ
2. Мы зацикливаем через буквы между ними и проверьте, есть ли соответствие нового слова. Если согласились, мы расширяем конец При необходимости это в случае, если есть такие ключевые слова, такие как Onte Отказ
3. остановиться, когда конец встречается. Подстрока между Начать и конец должно быть выделено.

Выше логические ручки перекрывают, как насчет смежного случая?

highlightKeywords(
  'Hello FrontEnd Lovers', 
  ['Front', 'End', 'JavaScript']
)
// 'Hello FrontEnd Lovers'

Для этого мы могли бы действительно неоднократно искать интервалы сверху логики и группировать их.

Покажите мне код

Сначала мы решаем подпунктивную проблему:

Учитывая индекс запуска, верните конечный индекс выделения подстроки. Если не найдено, return -1.

Мы могли бы следовать, описанные выше шаги, чтобы получить следующий код.

const keywordSet = new Set(keywords)

// return -1 if non-existing
const getEndForEm = (start) => {
  let isEmFound = false
  let end = start

  // extend end if new keywords are matched.
  while (start <= end) {
    for (let word of keywordSet) {
      const length = word.length
      if (html.slice(start, start + length) === word) {
        isEmFound = true
        end = Math.max(end, start + length - 1)
      }
    }

    start += 1
  }

  return isEmFound ? end : -1
}

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

let result = ''

for (let i = 0; i < html.length;) {
  let endForEm = getEndForEm(i)

  // check if there is adjacent keyword 
  while (endForEm > -1) {
    const nextEndForEm = getEndForEm(endForEm + 1)
    if (nextEndForEm === -1) {
      break
    }
    endForEm = nextEndForEm
  }

  if (endForEm > -1) {
    result += '' + html.slice(i, endForEm + 1) + ''
    i = endForEm + 1
  } else {
    result += html[i]
    i += 1
  }
}

return result

Прошедший

Это интересная проблема.

Надеюсь, это поможет, вы можете попробовать на здесь

Оригинал: “https://dev.to/jser_zanp/bfe-dev-55-highlight-keywords-in-html-string-4e0j”