javascript - 按字符索引将标签插入字符串

Question

我有一个字符串，我必须使用数组中的开始/结束值将“div”插入到该字符串中。

var str = "this is a simple string";

var places = [{
    "start": 0,
    "end": 3
  },
  {
    "start": 9,
    "end": 15
  }];

function insert(places, str) {
  // I tryed different approaches like this:
  str = str.forEach(function(item, index) {
    var start = item.start;
    var end = item.end;
    
    var newStr = '<div>'+str[start] + '</div>' + str.slice(end);
    str = newStr;
  });
  $('.h').html(str);
  // I need to get output str as:
  // "<div>this</div> is a <div>simple</div> string"
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="h"></div>

如何使用 splice 或 foreach 函数来做到这一点？

Answer 1

您可以使用 str 作为单个字母的数组，并在循环中将所需的标签应用于字母。然后将所有项目连接在一起并返回字符串。

此解决方案适用于随机排序的地点。

function insert(places, str) {
    return places.reduce(function (r, a) {
        r[a.start] = '<div>' + r[a.start];
        r[a.end] += '</div>';
        return r;
    }, str.split('')).join('');
}

var str = "this is a simple string",
    places = [{ "start": 0, "end": 3 }, { "start": 10, "end": 15 }];

console.log(insert(places, str));

一种不减少的解决方案:

function insert(places, str) {
    var r = str.split('');
    places.forEach(function (a) {
        r[a.start] = '<div>' + r[a.start];
        r[a.end] += '</div>';
    });
    return r.join('');
}

var str = "this is a simple string",
    places = [{ "start": 0, "end": 3 }, { "start": 10, "end": 15 }];

console.log(insert(places, str));

为了进一步阅读，您可以查看这个答案，为什么字母数组可能比字符串函数更快:How do I replace a character at a particular index in JavaScript?