根据给定的索引突出显示字符串

Question

假设我得到了const s = "Old Man's War"//Each indices represent the beginning and end index of the stringconst indices = [     [ 0, 0 ],     [ 5, 5],     [ 11, 11]]索引代表我想要强调的内容的开始和结束。所以我想返回类似的东西<span class="bold">O</span>ld M<span class="bold">a</span>n's W<span class="bold">a</span>r我怎样才能做到这一点？似乎无法提出一个像样的算法。

Answer 1

一种选择是.split()将字符串放入一个数组中<span class="bold">，添加</span>到每个开始索引，附加到每个结束索引，然后.join()重新组合在一起：

const s = "Old Man's War"

const indices = [[0,0],[5,5],[11,11]]

let result = indices.reduce((str, [start,end]) => {

  str[start] = `<span class="bold">${str[start]}`;

  str[end] = `${str[end]}</span>`;

  return str;

}, s.split("")).join("");

document.getElementById("result").innerHTML = result;

.bold { font-weight: bold; }

<div id="result"></div>

Answer 2

你可以试试这样的

• 首先根据索引获取字符串切片

• 如果当前索引与0th索引第一个值匹配，则循环遍历字符串，然后将切片字符串从map最后一个字符串添加到最后一个字符串，并通过索引第 0 个元素（结束索引）的第二个值增加索引

• 否则通常将其附加到最终字符串

const s = "Old Man's War"

const indices = [[0,0],[2,4],[5,5],[11,11]]

const final = indices.map(([start,end])=> s.slice(start,end+1))

let output = ''

for(let i=0; i<s.length; i++){

  if(indices[0][0] === i){

    output += `<span class="bold">${final[0]}</span>`

    i += indices[0][1]

    indices.shift()

    final.shift()

  } else{

    output += s[i]

  }

}

document.getElementById("result").innerHTML = output;

.bold { font-weight: bold; }

<div id="result"></div>