Заменить повторяющуюся строку ее частью

Question

Допустим, у меня есть следующий текст: (пример)

<table>
  <tr>
    <td>
      <span>col1</span>
    </td>
    <td>col2</td>
  </tr>
  <tr>
    <td>text1</td>
    <td>
      <span>text2</span>
    </td>
  </tr>
</table>

Я хочу заменить все <span>%</span> на %, и я нашел решение, подобное этому:

replace(/<span>(.*)<\/span>/gi, function(full, text){return text;})

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

Как я могу сказать JS заменить каждое вхождение на правильное, а не все сразу? Решение должно быть в Javascript, очевидно. Я надеюсь, что мой пример не слишком «прост» и содержит ошибки, чтобы избежать путаницы.

Answer 1

.* является жадным, поэтому будет счастливо совпадать с </span>...<span>. Замените его на [\s\S]*?, который не является жадным, но (в отличие от .) соответствует любому символу, включая символы новой строки.

/<span>([\s\S]*?)<\/span>/gi

Еще лучше, правильно проанализировать его в DOM, а затем изменить диапазоны там.

EDIT:

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

Для разбора HTML вы можете сделать

var container = document.createElement('DIV');
container.innerHTML = myStringOfHTML;

Тогда

container.getElementsByTagName('SPAN')

получит все SPAN.

Найти те, которые содержат только текстовый узел, просто:

var spans = container.getElementsByTagName('SPAN');
for (var i = 0, n = spans.length; i < n; ++i) {
  var span = spans[0];
  // do work here
}

, чтобы сложить детей в родителя,

var spans = document.getElementsByTagName('SPAN');
for (var i = 0, n = spans.length; i < n; ++i) {
  var span = spans[0];
  while (span.firstChild) {
    span.parentNode.insertBefore(span, span.firstChild);
  }
  span.parentNode.removeChild(span);
}

Answer 2

Я понимаю, что HTML и регулярные выражения обычно не сочетаются друг с другом, и @MikeSamuel предлагает хорошее решение для использования DOM, но это действительно просто сделать с помощью регулярных выражений (в данном случае).

var text = '<td>Hello</td> <td><span>WORLD</span></td> <td>Begin</td> <td><span>AGAIN</span></td>';
text.replace(/<span>([\s\S]*?)<\/span>/gi, '$1');

-> "<td>Hello</td> <td>WORLD</td> <td>Begin</td> <td>AGAIN</td>"