Question

我试图让字符串中的某些字母（如果找到）的颜色不同，例如。信我。搜索计数正常工作我只是无法弄清楚单个字母的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; //目标值的计数 var 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）;

Answer 1

您需要为该类添加相应的css或更改标签，如@john_Smith指定

添加CSS

span.red {
  color: red;
}

更改标记

在您的代码中替换此

getMsg = getMsg.replace('/i/g<span class="red">i</span>');

的

getMsg = getMsg.replace('/i/g<span style:"color:red">i</span>');

Some example of inline css

关于调色板的一些建议

尝试查看d3色标（https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors）或应用类似于增加RGB值的原则，而不是使用颜色名称。

希望这有帮助。

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

1 个答案: