Javascript 替换不影响所有数组元素

Question

下面的代码应该用一个跨度替换所有数组值，并将其格式化为不同的颜色。不幸的是，这仅适用于第五个数组值，不适用于任何其他数组值。我不确定错误在哪里。代码和 fiddle 如下:

var names = ["JakeP97", "Trishy", "Puffs", "Evilgenious", "Joeyc", "TheKid"];
var namecolours = ["red", "pink", "yellow", "white", "green", "blue"];

var tribechat = document.getElementsByClassName('tribeconvo');
for (var i = 0; i < tribechat.length; i++) {
  colourallocate(names[i], namecolours[i]);
}

function colourallocate(chatname, chatcolour) {
  var s = tribechat[i].innerHTML;
  s = s.replace(chatname, '<span style="color:' + chatcolour + '">' + chatname + '</span>');
  tribechat[i].innerHTML = s;
}

<div class="tribeconvo">Joeyc: hey everyone</div>
<div class="tribeconvo">JakeP97: hello joey</div>
<div class="tribeconvo">Joeyc: oi m8, whats up</div>
<div class="tribeconvo">TheKid: LOL hey JakeP</div>
<div class="tribeconvo">Joeyc: RIP</div>

Answer 1

您的代码无法正常工作，因为您的名称顺序与 html 元素的顺序不匹配。您不能使用您的名称作为键，因为您的数组也不是唯一的。我建议使用此解决方案，以便根据索引将名称与颜色配对。

var names =       ["Joeyc", "JakeP97", "TheKid"];
var namecolours = ["green", "pink", "blue"];
	
		
	var tribechat = document.getElementsByClassName('tribeconvo');
	for(var i = 0; i < tribechat.length; i++)
	{
		colourallocate(tribechat[i]);
	}
	
	function colourallocate(tribechatParameter) {
    var currentName = tribechatParameter.childNodes[0].innerText; // Finds the span
    var propperIndex = names.indexOf(currentName);
		var s = tribechatParameter.innerHTML;
		s = s.replace(currentName, '<span style="color:' + namecolours[propperIndex] + '">' + currentName + '</span>');
		tribechatParameter.innerHTML = s;
	}

<div class="tribeconvo"><span class="name">Joeyc</span>: hey everyone</div>
<div class="tribeconvo"><span class="name">JakeP97</span>: hello joey</div>
<div class="tribeconvo"><span class="name">Joeyc</span>: oi m8, whats up</div>
<div class="tribeconvo"><span class="name">TheKid</span>: LOL hey JakeP</div>
<div class="tribeconvo"><span class="name">Joeyc</span>: RIP</div>
<div class="tribeconvo"><span class="name">TheKid</span>: LOL hey JakeP</div>