Using jQuery to highlight a character of a string on a webpage

Question

I want to use jQuery to highlight a character of a string on a webpage at an index of some value. The value is variable – one time it will be at the index of 2, and the ne

Answer 1

I want to use jQuery to highlight a character of a string on a webpage at an index of some value

To highlight characters by its index, Use the below snippet. This works on the already generated DOM. And all you need to get this working is a index.

$(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: I have no idea how you are getting the index to highlight, You might end up giving index of a space character or you might not have total control over the index unless you are pretty sure of how you are generating it. So I feel playing with the characters should be easier and safe.

---

Additional Info

Previously I had built a similar stuff for a guy in SO. Here is the Working Jsfiddle. This must give you a basic idea. Below is a snippet you can look at if you are interested.

$(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

This works just fine.

Include jquery plugin in your code.

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

My HTML looks like this

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

Then include this JS function in your code.

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);
    }

Answer 3

You can do this with HTML and CSS.

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

Then highlight it dynamically with CSS classes and Jquery.

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

Then your CSS could be:

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

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

Answer 4

Use below highlight() and pass index and text.

<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>