If you want find 9th character or 19th line in a text, how will you do ?. You can do this manually or by using editors. Here I am going to implement this functionality with jQuery. I have created one simple online tool by using this program.


  1. Get text, character or line position
  2. Enclose every character by span element with id attribute as "char"+(char number)
  3. Enclose every paragraph by div element with id attribute as "line"+(line number)
  4. If it is character number then  highlight element with id "char"+(number) element by assigning new css
  5. If it is line number then  highlight element with id "line"+(number) element by assigning new css

jQuery Code

function hilightPosition(text, number, charOrLine) {
      var len = text.length + 1;
      var res = '';
      var j=2;
      res += '<div id="line1">';
      for(var i=1;i<=len;i++) {
        if(text.charAt(i-1) == '\n') {
          // Adding line id
          res += '</div><div id="line'+j+'">';
        // Adding char id
        res += '<span id="char'+i+'">'+text.charAt(i-1)+'</span>';
      res += '</div>';
      // Display text
      // Check whether we have to hilight line or character
      if(charOrLine == 'line'){
        // Highlight line id
        $("#line"+number).attr("style","border:2px solid #0000ff;");
      } else {
        // Highlight char id
        $("#char"+number).attr("style","border:2px solid #0000ff;");



Follow this blog by Email

Popular Posts