Question

I’ve been struggling with javascript string methods and regexes, and I may be overlooking something obvious. I hope I violate no protocol by restating tofutim’s question in some more detail. Responses to his question focus upon s.replace(), but for that to work, you have to know which occurrence of a substring to replace, replace all of them, or be able to identify somehow uniquely the string to replace by means of a regex. Like him, I only have an array of text offsets like this:

[[5,9], [23,27]]

and a string like this:

"eggs eggs spam and ham spam"

Given those constraints, is there a straightforward way (javaScript or some shortcut with jQuery) to arrive at a string like this?

"eggs <span>eggs</span> spam and ham <span>spam</span>"

I don’t know in advance what the replacement strings are, or how many occurrences of them there might be in the base text. I only know their offsets, and it is only the occurrences identified by their offsets that I want to wrap with tags.

any thoughts?

Answer 1

I found a way to do it with regexp. Not sure about performance, but it’s short and sweet:

/**
 * replaceOffset
 * @param str A string
 * @param offs Array of offsets in ascending order [[2,4],[6,8]]
 * @param tag HTML tag
 */
function replaceOffset(str, offs, tag) {
  tag = tag || 'span';
  offs.reverse().forEach(function(v) {
    str = str.replace(
      new RegExp('(.{'+v[0]+'})(.{'+(v[1]-v[0])+'})'), 
      '$1<'+tag+'>$2</'+tag+'>'
    );
  });
  return str;
}

Demo: http://jsbin.com/aqowum/3/edit