Регулярные выражения для замены строк, имеющих один тип тега в Javascript

Question

Я хочу заменить все строки между, до и после <span style="[^"]+">.*?</span> тегами, которые могут быть в строке с тегами span (никаких других тегов HTML, только простой текст) У меня есть такое регулярное выражение.

var span_re = /^(.+)(?=<span)|(?=<\/span>)(.+)(?=<span)|(?=<\/span>)(.+)$/g;
str = str.replace(span_re, '<span>$1</span>');

для этой строки

'foo<span style="text-decoration:underline;">bar</span>baz'

Я получил

'<span>foo</span><span style="text-decoration:underline;">bar<span></span>'

Я хочу это:

'<span>foo</span><span style="text-decoration:underline;">bar</span><span>baz</span>'

Я также пытаюсь использовать: .+?, .*? и вместо этого .+ захватывать все выражения без результата.

Мне не нужен анализатор, я не анализирую XHTML и не имею автономных тегов.

Answer 1

Синтаксический анализ HTML с помощью регулярных выражений редко бывает хорошей идеей, особенно в контексте веб-браузера.Вот простой пример, который получает то, что вы хотите, используя jQuery:

Даже если этот HTML еще не находится в DOM, его легко обернуть в фиктивный элемент:

var wrapper = $('<div />')
wrapper.html('foo<span style="text-decoration:underline;">bar</span>baz');
wrapper.contents()
  .filter(
      function(){return this.nodeType == 3;} //select text nodes only
   ) 
  .wrap('<span />');

В качестве бонуса, это будет хорошо работать с другими тегами, и даже если у вас есть несколько <span> тегов со свободным текстом между ими.

Рабочий пример: http://jsbin.com/acigu5/

Answer 2

Возможно, вы слишком усложняете это.Если вы знаете, что у вас может быть только один <span>, без других тегов и без неоткрытых > знаков, вы можете использовать это простое регулярное выражение:

s = s.replace(/^[^<]+|[^>]+$/gi, '<span>$&</span>');

Это регулярное выражение находит текст перед тегомначало, а не <) или после тега (не >, до конца), и заключает их в <span>.$& в регулярном выражении JavaScript заменяет целое совпадение или группу 0 (для других разновидностей, которые могут быть \0 или $0).

Обратите внимание, что (?=<\/span>) из вашего исходного регулярного выражения выглядит- впереди, а не назад (у JavaScript нет поддержки. Позор).Это привело к тому, что (.+) соответствовал закрывающему тегу и использовал его, что привело к неверному HTML.

Рабочий пример: http://jsbin.com/acexu4/