Javascript 使用jQuery突出显示网页上字符串的一个字符

我想使用jQuery突出显示网页上某个索引值处的字符串字符。该值是可变的–一次它将位于索引2，下一次它将位于索引3

var copy = "I am learning how to program.";
$('#letter').text(copy);
//code to highlight

输出示例：

---

您可以使用HTML和CSS来实现这一点

<div id="textholder"></div>

我想使用jQuery在某个值的索引处突出显示网页上字符串的一个字符

要按索引突出显示字符，请使用下面的代码段。这适用于已经生成的DOM。你需要做的就是建立一个索引

$（函数（）{
var docText=$（'#docContent'）.text（）；
var modifiedText=docText.highLightAt（7）；//传递一个索引，该文本将突出显示。
$（'#docContent'）.html（modifiedText）；
//您可以将这3行代码替换为单行代码，如
//$（'#docContent'）.html（$（'#docContent'）.text（）.highLightAt（7））；
});
//定义一个highLightAt函数，用高亮显示的字符替换您的字符。
String.prototype.highLightAt=函数（索引）{
返回this.substr（0，索引）+''+this.substr（索引，1）+''+this.substr（索引+1）；
}

。突出显示{
背景颜色：黄色；
颜色：绿色；
}

您可以将随机文本放在这里，程序将在给定索引处突出显示该特定字符。

使用下面的highlight（）并传递索引和文本

<script>
    $(document).ready(function () {
        var text = "I am learning how to program.";
        highlight(3, text);//pass index and text to highlight
    });

    function highlight(index, text) {
        var _finalText = text.substring(0, index) + "<span class='highlight'>" + text.substring(index, (index + 1)) + "</span>" + text.substring((index + 1));
        $('#letter').html(_finalText);
    }
</script>
<style>
    .highlight
    {
        display: inline-block;
        background-color: yellow;
    }
</style>
<div id="letter">
</div>

$（文档）.ready（函数（）{
var text=“我正在学习如何编程。”；
突出显示（3，文本）；//传递要突出显示的索引和文本
});
功能突出显示（索引、文本）{
var_finalText=text.substring（0，索引）+“”+text.substring（索引，（索引+1））+“”+text.substring（索引+1））；
$（'字母'）.html（_finalText）；
}
.亮点
{
显示：内联块；
背景颜色：黄色；
}

这很好用。

在代码中包含jquery插件

<script type="text/javascript" src="path/to/your/jquery">

我的HTML看起来像这样

<p class="highlight">This is my first statement</p>

这是我的第一句话

然后在代码中包含这个JS函数

highlight(index); //Make a call to this function.
function highlight(index){
        var text = $(".highlight").text();
        text = text.substr(0,index)+"<span style='color:***desired-color***'>"+text[index]+"</span>"+text.substr(index+1,text.length);
        $(".highlight").html(text);
    }

突出显示（索引）//调用此函数。
功能突出显示（索引）{
var text=$（“.highlight”）.text（）；
text=text.substr（0，索引）+“”+text[index]+“”+text.substr（索引+1，text.length）；
$（“.highlight”）.html（文本）；
}

你从哪里得到索引号？我从另一个变量count得到if。我的朋友，在所有答案之后仍然没有运气。谢谢大家的帮助！我非常感激。因为我对编程非常陌生，所以花了一点时间才理解所有内容。

text.substring（index，（index+1））

不会选择一个字符。如果index=5，它将选择从5到（5+1）计数的所有字符，即：5到11，因此它将是长度为（5+1）的子字符串。子字符串（index，（index+1））不会选择一个字符。如果index=5，它将选择从5到（5+1）计数的所有字符，即：5到6，因此它将是长度为（5+1）5+1=6而不是11的子字符串。请检查您的控制台。当你说

substring（0,2）

它实际上是

substring（fromIndex，howManyCharacters）

可能你不知道substring，请参考。

<p class="highlight">This is my first statement</p>

highlight(index); //Make a call to this function.
function highlight(index){
        var text = $(".highlight").text();
        text = text.substr(0,index)+"<span style='color:***desired-color***'>"+text[index]+"</span>"+text.substr(index+1,text.length);
        $(".highlight").html(text);
    }