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

我有一个字符串“你好，这是一个文本字符串。”JS子串文本替换为<span>递归

而且我有一个数组

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

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

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

来源

2017-08-12 Everett Glovier

您可以创建属性的每一个字母'[{的阵列：[“红']}，b：['yellow']}]'。然后，您可以重建包含HTML标记的文本。 –

将每个字母换成一个跨度。给出属于CSS类的范围的跨度（或直接应用样式）。 – Tomalak

“元素可以重叠”。怎么样？您应该显示您的预期输出，因为这看起来不正确。 – Andy

首先，你可以检查每个字母应该分配哪些颜色，然后你可以建立你的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>

来源

2017-08-12 15:05:15

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

回答

相关问题