JavaScript：隨機選擇顏色作爲基於輸入的字母

Question

我正在編寫一個應用程序，它接受用戶輸入並隨機將顏色分配給文本中的每個字母。

HTML代碼

<label id="text"> 
Retrieve data from selected text input among various text inputs with same 
name & id upon hitting Enter 
</label> 
<div> 
<input type="text" id="inputColors"> 
</div> 

<input id="Enter" type="button" value="Enter" /> 

的JavaScript

document.getElementById("Enter").onclick = function() { 
var colors = document.getElementById('inputColors').value; 
var colorslist = colors.split(/[;,]+/); 


$('#text').each(function() { 
    $(this).html($(this).text().split(' ').map(function(v) { 
    return '<span style="color:' + colorslist[Math.floor(Math.random() * 
colorslist.length)] + '">' + v + '</span>'; 
    }).join(' ')); 
}); 
} 

我能顏色的每個字，但希望它這樣做對每個letter.I不想使用CSS。

Answer 1

您的代碼當前在每個單詞周圍包圍span，因爲它的splits是空格字符上的字符串。

相反，您應該使用.split()將其拆分，它將返回所有字符（包括空格）的數組。

然後您需要使用.join()加入它們。

document.getElementById("Enter").onclick = function() { 
 
    var colors = document.getElementById('inputColors').value; 
 
    var colorslist = colors.split(/[;,]+/); 
 

 
    $('#text').each(function() { 
 
    $(this).html($(this).text().split('').map(function(v) { 
 
     return '<span style="color:' + colorslist[Math.floor(Math.random() * 
 
     colorslist.length)] + '">' + v + '</span>'; 
 
    }).join('')); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="text"> 
 
    Retrieve data from selected text input among various text inputs with same name &amp; id upon hitting Enter 
 
</div> 
 
<input type="text" id="inputColors" value="red,yellow,blue,green,orange" /> 
 
<input id="Enter" type="button" value="Enter" />