Roman123987

var str = 'Текст, текст, текст, текст, текст, текст';
var p = document.querySelector('p');
var str_arr = str.split(',');
var i = 0;
var colors = ['red', 'green', 'black', 'yellow', 'green', 'orange', 'gray']; //массив цветов
p.innerHTML = str_arr[0]; 
setInterval(function(){ 
  p.style.color = colors[i];
  i = (i+1)%colors.length;
}, 1000);

Ну так наверное надо стили элементу задавать, а не строкам: p.style.color = colors[i].

Ну, так вы удаляете элемент с массива, не изменяя i. Например, был массив
arr = [1,2,3]
вы удалили нулевой элемент
[2, 3]
и теперь переходите на следующую итерацию, где i=1, а значит, берете тройку, пропуская двойку.
Можно решить так

var str = '   ';
var str_1 = str.split('');
console.log(str_1); //вывожу элементы получившегося массива(3 пробела)
for(var i = 0; i<str_1.length; i++){
  if(str_1[i] == ' '){
    str_1.splice(i, 1);
    i--;
  }
}
console.log(str_1); //выводится 1 пробел...