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>

如何使用拼接或foreach函数来完成？

Answer 1

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

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

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?

Answer 2

以下是实现目标的一种方法，使用Array#forEach并连续改变字符串w / 11 chars shift为每个<div></div>标记添加。

var str = "this is a simple string";

// change place into an array of objects
var place = [
  {
    "start": 0,
    "end": 3
  },
  {
    "start": 10,
    "end": 15
  }
];

function insert(place, str) {
  var shift = 0;
  place.forEach(function(p){
    str = str.substring(0,p.start+shift) + "<div>" + 
    str.substring(p.start+shift,p.end+shift+1) + "</div>" + str.substring(p.end+shift+1);
    shift += 11; //shift 11 chars for each match
  });
  return str;
}

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

请注意，此解决方案取决于升序中保存索引的places数组。

Answer 3

假设你要写0, 4和10, 16（因为字符串'this'的长度为4，而不是3），它就变成了

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

function insert(places, str){
    var starts = [], ends = [];

    places.forEach(place => {
        starts.push(place.start);
        ends.push(place.end);
    });

    return str.split('').map((chr, pos) => {
        if(starts.indexOf(pos) != -1) chr = '<div>' + chr;
        if(ends.indexOf(pos) != -1) chr = '</div>' + chr;
        return chr;
    }).join('')
}

console.log(insert(places, str)); // <div>this</div> is a <div>simple</div> string

Answer 4

你可以这样做......虽然我建议你更好地选择你的字符串索引。特别是如果end索引不指向最后一个字符而不指向超出的字符会更好。我已相应地修改了数据。我们为每一轮减少添加了11的偏移，因为我们的字符串每轮增加“<div></div>”多个（11）个字符。

var str = "this is a simple string";

  place = [{
            "start": 0,
              "end": 4
           },
           {
            "start": 10,
              "end": 16
           }],
 newStr = place.reduce((s,o,i) => s.slice(0,o.start + (i*11)) + "<div>" +
                                  s.slice(o.start + (i*11), o.end + (i*11)) + "</div>" +
                                  s.slice(o.end + (i*11)), str);
console.log(newStr);

当然可以推广插入任何标签。

将标记插入逐字符串索引

4 个答案: