console.logに虹メッセージを表示する方法

Question

こんにちはconsole.log出力をrainbowtizingするためのスクリプトがあります。

私が試したとき、console.logは生の文字列を出力しましたが、この出力を別のconsole.logにコピーすると、メッセージは正しい色で出力されます。

あなたはその理由を知っていますか？

var input = document.getElementById('input'); 
 

 
input.addEventListener("blur", function() { 
 
\t var inputValue = input.value; 
 
\t var inputSplitted = inputValue.split(""); 
 
\t 
 
\t let i = 0, 
 
\t \t inputLength = inputSplitted.length; 
 
\t var newLog ='"'; 
 
\t var colors = ""; 
 
\t for(i=0; i<inputLength; i++){ 
 
\t \t // Chaque lettre est contenue dans inputSplitted[i] 
 
\t \t newLog += "%c"+inputSplitted[i]; 
 
\t \t colors += ',"color: '+randomColor()+';"'; 
 
\t } 
 
\t newLog +='"'; 
 
\t var log = newLog+colors; 
 
\t console.log(log); 
 
\t console.log("%ch%ce%cl%cl%co%c %cw%co%cr%cl%cd","color: #144143;","color: #40C71F;","color: #5B7487;","color: #E3E226;","color: #6A8693;","color: #EC8802;","color: #9D44DE;","color: #1F1C4D;","color: #92812D;","color: #7A412C;","color: #73936F;"); 
 
}); 
 

 
function randomColor() { 
 
\t var letters = 'ABCDEF'; 
 
\t var color = '#'; 
 
\t for (var i = 0; i < 6; i++) { 
 
\t \t color += letters[Math.floor(Math.random() * 16)]; 
 
\t } 
 
\t return color; 
 
}

<input type=text name=input id=input>

Answer 1

ブラウザは単なる文字列としてではなく、パラメータとして文字列を扱うコメントで言われています。

配列を宣言し、console.log.applyを使用する必要があります。このコードがお手伝いします

var input = document.getElementById('input'); 
 

 
input.addEventListener("blur", function() { 
 
\t var inputValue = input.value; 
 
\t var inputSplitted = inputValue.split(""); 
 
\t 
 
\t let i = 0, 
 
\t \t inputLength = inputSplitted.length; 
 
\t var newLog =''; 
 
\t var colors = ""; 
 
\t for(i=0; i<inputLength; i++){ 
 
\t \t // Chaque lettre est contenue dans inputSplitted[i] 
 
\t \t newLog += "%c"+inputSplitted[i]; 
 
\t \t colors += '||color: '+randomColor()+';'; 
 
\t } 
 
\t newLog +=''; 
 
\t var log = newLog+colors; 
 
\t var arr = log.split('||'); 
 
\t console.log.apply(console, arr); 
 
\t console.log("%ch%ce%cl%cl%co%c %cw%co%cr%cl%cd","color: #144143;","color: #40C71F;","color: #5B7487;","color: #E3E226;","color: #6A8693;","color: #EC8802;","color: #9D44DE;","color: #1F1C4D;","color: #92812D;","color: #7A412C;","color: #73936F;"); 
 
}); 
 

 

 

 
function randomColor() { 
 
\t var letters = 'ABCDEF'; 
 
\t var color = '#'; 
 
\t for (var i = 0; i < 6; i++) { 
 
\t \t color += letters[Math.floor(Math.random() * 16)]; 
 
\t } 
 
\t return color; 
 
}

<input type=text name=input id=input>

ホープ：

は見てください。 :)