Javascript 返回HTML字符串，但使用HTML标记包装某些索引范围

我需要一个函数，可以执行以下操作

基于字符串数组的输入返回字符串 将html标记（如和）包装到特定索引范围 没有不必要的标签 语法正确 比如说,

var arr = ['foo ', 'bar ', 'bam' ];

var styles = {
  b: [0, 1, 2], 
  i: [1, 2],
  sup: [0]
}

var str = theMagicFunction(arr, styles);

console.log(str);
//=  "<b><sup>foo </sup><i>bar bam</i></b>"

---

为了清楚起见，我正在寻找一个node.js，香草javascript解决方案。我觉得解决方案不需要XML解析器。

我认为可以使用循环在必要的索引处附加标记。尝试以下基本实现：

function theMagicFunction(arr, styles) {

    var stylesArr = [], key;

    for (key in styles) {
        stylesArr.push({key: key, idx: styles[key]});
    }

    stylesArr.sort(function(a, b) { 
        return a.idx.length - b.idx.length
    })
    .forEach(function(style) {
        style.idx.sort(function(a, b) { return a - b; });
        arr[style.idx[0]] = '<' + style.key + '>' + arr[style.idx[0]];
        arr[style.idx[style.idx.length - 1]] += '</' + style.key + '>';
    });

    return arr.join('');
}

其思想是从最小字距到最大字距应用标记

结果是：foobar-bam

---

Demo:@dfsq键b是我要包装的标记，值[0，1，2]包含该标记应应用于传递给函数的数组的索引。在这种情况下，我希望标记应用于foo、bar和bamHey谢谢！下面的例子中有一点bug。接近尾端时，将出现重叠。我想在某些索引重叠的情况下，需要一些逻辑来向stylesArr添加一个项。我正在研究它，但如果你有任何想法，请告诉我。谢谢