JS子串文本替换为<span>递归

Question

我有一个字符串"Hello, this is a text string."

我有一个数组

[{start: 0, length: 5, color: "red"}, {start: 3, length: 5, color: "yellow"}]

我想弄清楚如何用类的元素替换这些值。本来，我只是做了一个从头到尾递归的子串。但是，元素可能会重叠，从而导致计数问题。显然一次只能显示一种颜色，但我仍然希望代码能够执行，即使用户想要突出显示两个相同的点。

有什么方法可以轻松做到这一点？

Answer 1

首先，您可以检查每个字母应该分配给什么颜色，然后您可以从中构建您的 HTML 结构。（以下示例尚未经过深入测试；在生产中使用之前请自行测试。）

var string = "Hello, this is a text string.";
var requirements = [
   {start: 0, length: 5, color: "red"},
   {start: 3, length: 5, color: "yellow"},
   {start: 0, length: 10, color: "blue"},
   {start: 9, length: 15, color: "green"}
];
var result = [];

for(var i = 0; i < string.length; i++) {
  result[i] = {
    letter: string[i],
    colors: []
  };
  for(var j = 0; j < requirements.length; j++) {
    if(i === requirements[j].start || (i > requirements[j].start && i < requirements[j].start + requirements[j].length)) {
      result[i].colors.push(requirements[j].color);
    }
  }
}

var output = "";
var isColoring = false;
for(var l = 0; l < result.length; l++) {
  if(result[l].colors.length) {
    if(!isColoring || (result[l-1] && result[l-1].colors[0] && result[l-1].colors[0] !== result[l].colors[0])) {
      output += '<span class="' + result[l].colors[0] + '">';
      isColoring = true;
    }
  } else {
    isColoring = false;
  }
  output += result[l].letter;
  if(result[l].colors.length) {
    if(isColoring && !(result[l+1] && result[l+1].colors[0] && result[l+1].colors[0] === result[l].colors[0])) {
      output += '</span>';
      isColoring = false;
    }
  }
}

document.querySelector('.text-wrapper').innerHTML = output;
document.querySelector('.requirements').innerHTML = JSON.stringify(requirements, null, 3);

console.log(output);

.red { color: red; }
.yellow { color: yellow; }
.blue { color: blue; }
.green { color: green; }

<pre class="text-wrapper"></pre>
<pre class="requirements"></pre>

JS子串文本替换为<span>递归

JS substring text replace with <span> recursive

javascript

recursion

replace

substring

highlight