JS 子字符串文本替换为 <span> 递归答案

【问题标题】：JS substring text replace with <span> recursiveJS 子字符串文本替换为 <span> 递归
【发布时间】：2017-08-12 23:33:49
【问题描述】：

我有一个字符串“你好，这是一个文本字符串。”

我有一个数组

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

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

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

【问题讨论】：

您可以为每个字母 [ { a: [ 'red' ] }, b : [ 'yellow'] } ] 创建一个属性数组。然后，您可以重建包含 HTML 标记的文本。
将每个字母包装在一个跨度中。给出属于 CSS 类范围的跨度（或直接应用样式）。
“元素可以重叠”。如何？您应该显示您的预期输出，因为这似乎不正确。

标签： javascript recursion replace substring highlight

【解决方案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>

【讨论】：