Javascript replace not affecting all array elements

Question

The code below is supposed to replace all of the array values with a span that formats it to a different colour. Unfortunately, this is only working for the fifth array value and not any others. I am unsure where the mistake is. Code and fiddle are below:

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>

You only replace names[0] in tribechat[0], names[1] in tribechat[1], and so on. The only one where the name matches the DIV is tribechat[5]. — Barmar
– Barmar, Commented Sep 5, 2017 at 16:51
Sorry, I am not an expert in this so I will ask for you to clarify further. You are saying that the only reason why this is working for the 5th one is because Joeyc is the 5th value in the array and his name is in the 5th instance of class tribeconvo? — EGxo
– EGxo, Commented Sep 5, 2017 at 16:53
No, the reason was that your replace doesn't find anything except for the 5th element. The first message poster's name isn't JakeP97 in your HTML so it can't work and so on. The 5th one was a coincidence, that's why it seemed to work. See my answer for details — Paul Ghiran
– Paul Ghiran, Commented Sep 5, 2017 at 17:04

Paul Ghiran · Accepted Answer · 2017-09-05 17:03:09Z

3

Your code wasn't working because the order of your names did not match with that of your html elements. You can't use your names as keys because you arrays aren't unique either. I suggest this sollution in order to pair names with colors based on an index.

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>

edited Sep 5, 2017 at 17:03

answered Sep 5, 2017 at 16:51

Paul Ghiran

1,2331 gold badge16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EGxo Over a year ago

In my real application, I would need all of the Joeyc's to be green, regardless of which tribeconvo they are sitting in. I just need the position of the name to match the position of the colour, everything else needs to apply to all of the classes.

Paul Ghiran Over a year ago

I was thinking. Maybe you wanted to have pairs of name and color based on an index in an array, in which case this last edit is it.

Barmar · Accepted Answer · 2017-09-05 16:56:17Z

You're not performing all the color replacements in every DIV. You just replace names[0] in tribechat[0], names[1] in tribechat[1]. You need to loop through all the names, trying all of the replacements.

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(tribechat[i]);
}

function colourallocate(chat) {
  var s = chat.innerHTML;
  for (var j = 0; j < names.length; j++) {
    s = s.replace(names[j], '<span style="color:' + namecolours[j] + '">' + names[j] + '</span>');
    if (s != chat.innerHTML) {
      tribechat[i].innerHTML = s;
      return;
    }
  }
}

<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>

Chris Edwards · Accepted Answer · 2017-09-05 17:20:10Z

It looks like you are referencing the variable i inside the function colourallocate, however i is declared outside of the scope of colourallocate:

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

You probably want to do something like:

for (var i = 0; i < tribechat.length; i++) {
  colourallocate(i)
}

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

Although given the simplicity of the 2 functions you could probably combine them:

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

Edvaldo Silva de Almeida Jr · Accepted Answer · 2017-09-05 18:17:09Z

You don't even need a separate function to perform the changes. You may do that inside the loop, like this:

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++) {
  arrs = tribechat[i].innerHTML.split(': ');
  tribechat[i].innerHTML = '';
  span1 = document.createElement('span');
  span1.innerHTML = arrs[0] + ': ';
  span1.setAttribute('style','color:' + namecolours[names.indexOf(arrs[0])]);
  span2 = document.createElement('span');
  span2.innerHTML = arrs[1];
  tribechat[i].appendChild(span1);
  tribechat[i].appendChild(span2);  
}

In the line

span1.setAttribute('style','color:' + namecolours[names.indexOf(arrs[0])]);

where you set the style attribute for the first span element, you use the name in arrs[0] to grab the index of the corresponding color in namecolours.

Fiddle here

Collectives™ on Stack Overflow

Javascript replace not affecting all array elements

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related