html頁面中的突出顯示文本不匹配

Question

我正在突出顯示用戶在html頁面中選擇的文本。

為此，我得到的值是用戶通過拖動鼠標選擇單詞。 我將它們放在數組onmouseup函數中。

單擊按鈕時，我正在突出顯示。 但是我不能突出顯示正確的位置，單詞被突出顯示但是位置錯誤。

該單詞在該div中出現4次，即使我選擇了第4個單詞，它也始終突出顯示第一個單詞。

這是我的代碼，這是什么問題。

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

Answer 1

改變你的功能

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

html頁面中的突出顯示文本不匹配

問題描述

1 個解決方案

解決方案1
1 2016-01-07 04:32:36

html頁面中的突出顯示文本不匹配

問題描述

1 個解決方案

解決方案1 1 2016-01-07 04:32:36

解決方案1
1 2016-01-07 04:32:36