JSサブストリングのテキストを<span>と再帰的に置き換えます

Question

"Hello、this is an text string"という文字列があります。

そして私は、私はクラスと要素とこれらの値を交換する方法を把握しようとしています配列

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

を持っています。もともと、私はちょうど終わりから始めて再帰的な部分文字列をしました。しかし、要素が重複してカウント問題を引き起こす可能性があります。明らかに一度に表示できる色は1色だけですが、同じスポットの2つを強調表示したい場合でも、コードを実行できるようにしたいと思います。

これを簡単に行う方法はありますか？

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>