javascript - Using jQuery to highlight a character of a string on a webpage - Stack Overflow

admin管理员组

文章数量:1415684

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 next time it will be at the index of 3.

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

Output example:

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 next time it will be at the index of 3.

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

Output example:

• javascript
• jquery
• string
• highlight

Share Improve this question Follow edited Mar 13, 2016 at 5:36 Benjamin W. 52.8k1919 gold badges132132 silver badges134134 bronze badges asked Mar 13, 2016 at 5:21 RickBRickB 1111 silver badge22 bronze badges 4

• where do you get the index number? – m2j Commented Mar 13, 2016 at 6:07
• I get if from another variable I called count. – RickB Commented Mar 14, 2016 at 13:19
• my friend, still no luck after all the answers. – m2j Commented Mar 14, 2016 at 13:50
• Thank you everyone for your help! I appreciated it very much. Since I am very new to programming it took me a little while to understand everything. – RickB Commented Mar 16, 2016 at 18:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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/aaronfranco/x3h4qnxj/1/

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>

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

本文标签： javascriptUsing jQuery to highlight a character of a string on a webpageStack Overflow