CODEWITHSUNDEEP
javascriptjqueryhtml
user5746191
user5746191

Reputation:

Highlight text in html page is not matching

I am working in highlighting a text which user selects in a html page.

For this, I am getting values which was user selects the word by dragging mouse. I am putting them in an array onmouseup function.

While clicking on a button, I am making highlight. But I am not able to highlight the correct position, word is highlighted but the position was wrong.

There is 4 occurrence of that word in that div, it always highlights the first one, even though I selects the 4th one.

Here is my code, What is the problem here.

    <html>
    <head>
    <style>
    textarea {
      width:100%;
      height:150px;
    }

    .hilited1 {
      background:red;
      color:#fff;
    }

    .highlight
    {
    background-color:yellow;
    }
    </style>

    </head>
    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="test">I am working in HTML with jquery.
      I want to make a webpage to highlight some text lines (line nos 15, 22, 32) in that page at a time. This can be done by left click in mouse and drag that line, so that the text line is selected with blue background.
    I am able to get the selected lines as follows using jquery,
    </div>

    <script type="text/javascript">

    var arr = [];

    function go()
    {
        for (var i = 0; i < arr.length; i++) {
            highlight(arr[i]);
        }
    }

    function highlight(text)
    {
        inputText = document.getElementById("test")
        var innerHTML = inputText.innerHTML
        var index = innerHTML.indexOf(text);
        if ( index >= 0 )
        { 
            innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length); 
            inputText.innerHTML = innerHTML 
        }
    }

    $('#test').mouseup(function () {
        var output='';
        output += getSelectedText();
        arr.push(output);
    });

    function getSelectedText() {
        if (window.getSelection) {
            return window.getSelection().toString();
        } else if (document.selection) {
            return document.selection.createRange().text;
        }
        return '';
    }

    </script>

    <button onclick="go()">Highlight</button>

    </body>
    </html>

Upvotes: 0

Views: 233

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

change your function

    $(document).on("mouseup", function (e) {
    var selected = getSelection();
    var range = selected.getRangeAt(0);
    console.log(range);
    if(selected.toString().length > 1){
        var newNode = document.createElement("span");
        newNode.setAttribute("class", "red");
        range.surroundContents(newNode);       
    }
    selected.removeAllRanges();
 });

function getSelection() {
    var seltxt = '';
     if (window.getSelection) { 
         seltxt = window.getSelection(); 
     } else if (document.getSelection) { 
         seltxt = document.getSelection(); 
     } else if (document.selection) { 
         seltxt = document.selection.createRange().text; 
     }
    else return;
    return seltxt;
}

HTML 

<h3>hello world! hello world! hello world</h3>
<div>hello world! hello world hello world!</div><span>hello world! hello world</span>

CSS

.red{color:red;}

http://jsfiddle.net/bZb7V/27/

Upvotes: 1

Related Questions