Javascript以不同的位置/长度在字符串中插入内容

Question

我有一个字符串，我有多个offset和length值。例如：

var str = '0123456789';

var matches = [{
    offset: 2,
    length: 3
}, {
    offset: 6,
    length: 2
}];

目标是在偏移量之前插入<span> ，在偏移量+长度之后插入</span> 。在上面的示例中，字符串看起来像那样（为了可读性而添加了空格）：

str = '01 <span class="red"> 234 </span> 5 <span class="red"> 67 </span> 89';

我尝试了什么：

function splitValue(value, offset, length) {

    return value.substring(0, offset) + ' <span class="red"> ' + value.substring(offset, offset + length) + ' </span> ' + value.substring(offset + length, value.length);
}

matches.forEach(function (match) {

    console.log(splitValue(str, match.offset, match.length));
});

输出：

01 <span class="red"> 234 </span> 56789
012345 <span class="red"> 67 </span> 89

这很好。

问题：

我无法用forEach中的函数输出替换字符串值，因为在第一次循环之后所有内容都会被移位。

matches.forEach(function (match) {

    str = splitValue(str, match.offset, match.length);
});

console.log(str);

输出：

01 <sp <span class="red"> an </span>  class="red"> 234 </span> 56789

我怎样才能实现这一目标？

我想通过添加插入内容的长度来避免重新计算下一个偏移（我知道这样可行）。提前谢谢！

Answer 1

我已经实现了这样做的方法（即使值重叠也应该有效）：

我做了一个js小提琴，看it working.

var str = '0123456789';

var matches = [{
    offset: 2,
    length: 3
}, {
    offset: 6,
    length: 2
}];
var insertionPoints = [];
for (var i in matches){
    insertionPoints.push({location:matches[i].offset,val:'<span class="red">'});
    insertionPoints.push({
        location: matches[i].offset+matches[i].length,
        val:'</span>'});
}
insertionPoints.sort(function(a,b){
    return b.location- a.location;
});
console.log(insertionPoints);
for(var i in insertionPoints){
    str=str.substring(0, insertionPoints[i].location)
    +insertionPoints[i].val
    +str.substring(insertionPoints[i].location);
}
console.log(str);

Answer 2

让当前代码在循环中工作的最简单方法是循环匹配列表（假设它们处于位置顺序）。

您也可以通过偏移向后排序匹配，然后循环遍历。

Answer 3

试试这个

var str = '0123456789';
var sections = [];

var matches = [{
    offset: 2,
    length: 3
}, {
    offset: 6,
    length: 2
}];

for (var i = 0; i < matches.length; i++) {
    var arr = str.split('');

    var match = matches[i];
    var section = arr.splice(match.offset, match.length).join('');

    sections.push(section);
}

for (var i = 0; i < sections.length; i++) {
    str = str.split(sections[i]).join('<span class="red">' + sections[i] + '</span>');
}

console.log(str);

小提琴 - http://jsfiddle.net/gf0kvy8e/