返回一个HTML字符串，但是某些索引范围包含在html标记中

Question

我需要一个可以执行以下操作的功能

• 根据字符串数组
的输入返回一个字符串
• 将<b>和<i>等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，vanilla javascript解决方案。我不觉得解决方案需要XML解析器。

Answer 1

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

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

我们的想法是将标记从最小字跨度应用到最大值。

结果：<b><sup>foo</sup><i>bar bam</i></b>

演示：http://jsfiddle.net/dfsq/8cHr3/