Regex: Как я могу получить последнее слово в строке HTML, игнорируя теги HTML?

Question

У меня есть следующий код в Javascript:

html.replace(/(\S+)\s*$/, '<span class="highlight-word">$1</span>');

Я бы хотел выделить последнее слово в строке HTML; однако, если в конце есть тег HTML, этот тег будет заключен в интервал «highlight-word».

Например:

This is a test <br> <b> hello there </b>

станет:

This is a test <br> <b> hello there <span class="highlight-word"></b></span>

Как я могу исправить вышеприведенное регулярное выражение, чтобы результат был таким:

This is a test <br> <b> hello <span class="highlight-word">there</span> </b>

Answer 1

Простым и элегантным решением будет заменить ваш RegEx следующим шаблоном с заглядыванием в будущее.

(\w*)(?=\W*\<\/.*\>$)

Этот шаблон соответствует только последнему слову перед закрытием любого тега.

Answer 2

Если вы не хотите делать все за один шаг, вы можете воспользоваться следующим подходом:

1. Получите textContent вашей строки, в которой пропущены все теги HTML.
2. Из этого извлеките последнее слово.
3. В исходной строке замените последнее слово упакованной версией.

Если вы работаете в браузере, это может выглядеть вот так:

function highlightLast( str ) {

  // create a wrapper to get the textcontent
  const wrapper = document.createElement( 'div' );
  wrapper.innerHTML = str;
  
  // get the last word
  const lastWord = wrapper.textContent.split( /\b/ ).pop();

  // highlight the last occurrence of that word
  return str.replace( new RegExp( `${lastWord}(?![\\s\\S]*${lastWord})` ), `<span class="highlight-word">${lastWord}</span>` );

}

console.log( highlightLast( '<div id="divA">This is <span>some</span> text</div>' ) );
console.log( highlightLast( '<div id="divA">This is text with <span>some</span> more text</div>' ) );

Обратите внимание, что есть некоторые крайние случаи, которые вам, возможно, придется решить. В частности, если слово содержит специальные символы, вам необходимо экранировать их перед созданием RegExp.