Question

Let’s say I have the following text: (example)

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

I want to replace all <span>%</span> by %, and I’ve come up with a solution like this:

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

It replaces from the first span until the last one by only one occurrence, therefore the whole structure of my table is messed up.

How could I tell JS to replace each occurrence by the right one and not everything at once? The solution needs to be in Javascript obviously. I hope my example is not too “simple” and bugged to avoid any confusion.

Answer 1

.* is greedy, so will happily match </span>...<span>. Replace it with [\s\S]*? which is non-greedy, but (unlike .) matches any character including newlines.

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

Better yet, parse it properly to a DOM and then change the spans there.

EDIT:

Rather than learn how to kind-of-parse HTML with regular expressions, your time would be better spent learning the DOM manipulation tools that are better suited to this problem.

To parse the HTML, you can do

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

Then

container.getElementsByTagName('SPAN')

will get all the SPANs.

Finding the ones that contain only a text node is simple:

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

to fold the children into the parent,

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);
}