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

Question

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

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

输出示例：

Answer 1

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

要通过索引突出显示字符，请使用下面的 sn-p。这适用于已经生成的 DOM。让这个工作你需要的只是一个索引。

$(function() {
  var docText = $('#docContent').text();
  var modifiedText = docText.highLightAt(7); //pass a index and that text will be highlighted.
  $('#docContent').html(modifiedText);

  //you can replace this 3 lines of code to single line like 
  // $('#docContent').html($('#docContent').text().highLightAt(7));
});

//define a highLightAt function to replace your char with a highlighted one.
String.prototype.highLightAt = function(index) {  
  return this.substr(0, index) + '<span class="highlight">' + this.substr(index,1) + '</span>' + this.substr(index +1);
}

.highlight {
  background-color: yellow;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="docContent">
  You random text goes here, And The program would highlight that particular character at a given index.
</div>

Note:我不知道你是如何让索引突出显示的，你最终可能会给出一个空格字符的索引，或者你可能无法完全控制索引，除非你很确定你是如何生成它的.所以我觉得和角色一起玩应该更容易和安全。

---

其他信息

以前我为 SO 中的一个人构建了一个类似的东西。这是Working Jsfiddle。这必须给你一个基本的想法。下面是一个sn-p，有兴趣可以看看。

$(function(){ 
  var docText = $('#docContent')[0].innerHTML;
  var modifiedText = docText.replace(/e/g, "<span class='highlight'>e</span>"); //using regex to match all the chars `e`, We are not playing with the index, But only chars here  
 $('#docContent').html(modifiedText);
 
  setInterval(function() { 
     $('span.highlight:not(.highlight-active):eq(0)').addClass('highlight-active');
     }, 1000);
});

.highlight-active {
  background-color: yellow;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="docContent">
  You random text goes here, And The program would highlight all the characters 'e' in this text.
</div>

Answer 2

您可以使用 HTML 和 CSS 做到这一点。

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

然后使用 CSS 类和 Jquery 动态突出显示它。

$("#textholder").html("Here is some <span class='highlight'>Hi</span>ghted text");

那么你的 CSS 可能是：

.highlight {
   display:inline-block;
   background-color:"yellow";
}

https://jsfiddle.net/aaronfranco/x3h4qnxj/1/

Answer 3

使用下面的 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>

Answer 4

这很好用。

在您的代码中包含 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);
    }