html页面中的高亮文本不匹配答案

【问题标题】：Highlight text in html page is not matchinghtml页面中的高亮文本不匹配
【发布时间】：2016-04-10 14:08:48
【问题描述】：

我正在突出显示用户在 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>

【问题讨论】：

您通过 文本值 而不是选择开始/结束进行匹配。当然它只会突出显示第一场比赛。
问题是浏览器对获取文本选择 start+end 的支持并不普遍。您需要支持哪些浏览器？
jsfiddle.net/jme11/bZb7V
@LaljiTadhani：您应该将其发布为答案

标签： javascript jquery html

【解决方案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/

【讨论】：

试过了，但是在第 76 行得到“未捕获的 RangeError: Maximum call stack size exceeded”--- (function getSelection() {)..
感谢您的帮助，但我想要更多。单击按钮后如何取消选择范围并删除跨度标记和红色类？