使字符串中的单个字母具有不同的颜色

我正在尝试使字符串中某些字母（如果找到）的颜色不同，例如字母 i。搜索计数正在工作，我只是无法弄清楚单个字母的 html 颜色变化。

我知道如果它是一个完整的单词，那么我只能使用拆分字符串，但无法弄清楚如何为单个字母做到这一点。我找到了一些例子，我尝试过的一个在底部也不起作用。

//getMsg is another function, which passes in a user inputted string
function searchMsg(getMsg) { 
            alert (getMsg);
            var msgBoxObject = document.getElementById('msgBox');
            var pos = getMsg.indexOf('i')
            var txtToFind = (document.getElementById('txtToFind').value);
            var count = 0;
            while (pos !== -1){
                count++;
                pos = getMsg.indexOf('i', pos + 1);
                document.writeln (+count);
            msgBoxObject.innerHTML = (count);
        }
    getMsg = getMsg.replace('/i/g<span class="red">i</span>');
 document.writeln (getMsg);
}

 Edit; I've added in this, but can't get the loop to work correctly so it displays all instances of the letter found instead of just one: /*while (pos !== -1){
                count++;
                pos = getMsg.indexOf('i', pos + 1);
                document.writeln (+count);
            msgBoxObject.innerHTML = (count);
        }
        */

var count = 0;//目标值的计数 变量 i = 0; 迭代计数器

// Examine each element.
for(i=0; i<arr.length; i++) 
{   if(arr[i] == targetValue) 
        count++;
}
return count;
}
searchIndex = txtMsg.indexOf(txtToFind);
        if (searchIndex >=0 ) {
      // Copy text from phrase up till the match.
      matchPhrase = txtMsg.slice(0, searchIndex);
      matchPhrase += '<font color="red">' + txtToFind + '</font>';
      matchPhrase += txtMsg.slice(searchIndex + txtToFind.length);          
} else {
      matchPhrase = "No matches"
}
displayProcessedMsg(matchPhrase);

document.writeln（matchPhrase）;