Question

我还没找到符合所有条件的插件：我想要一个荧光笔。我希望能够突出显示文本，按照选择顺序存储文本，如果他们只选择单词的一部分，我想自动选择所有单词。

这是我到目前为止所做的：

JS：

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }

    return html;
}

function highlightAndStore() {

    var html = getSelectionHtml().toString();
    if(html.indexOf('<span class="highlighted">') === 0) {
        html = html.replace('<span class="highlighted">','');
       // alert(html);
    }
    var newHtml = html;
    var prepend = '<span class="highlighted">';
    var postpend = '</span>';
    var allhtml = $('#highlightable').html().toString();

    var hightlightableHtml = $('#highlightable').html().toString();
    var indexofHighlight = hightlightableHtml.indexOf(html);
alert(indexofHighlight +'          '+hightlightableHtml);
        /*
    if (indexofHighlight < 0) {
        var temp = '<span class="highlighted">' + html;
        var indexofHighlight = hightlightableHtml.indexOf(html);
    }*/
    var shortenedHtml = hightlightableHtml.substring(0, indexofHighlight);

    var spanStarts = locations('<span class="highlighted">', shortenedHtml);
    var spanEnds = locations('</span>', shortenedHtml);
   // alert(shortenedHtml + '                              ' + spanStarts.length + '   ' + spanEnds.length + '     '+indexofHighlight);
    if (spanStarts.length > spanEnds.length) // span inside or after selection
    {
        prepend = '';

        var insSS = locations('<span class="highlighted">', html);
        var insSE = locations('</span>', html);
        //alert('no. span starts: ' + insSS.length + '  ends: ' + insSE.length);
        if (insSS.length > insSE.length) {
            postpend = postpend + '<span class="highlighted">';
        } else if (insSS.length == insSE.length) {
            postpend = '';
        }
    }
    newHtml = html.replace(/<span class="highlighted">/g, "");
    newHtml = newHtml.replace(/<\/span>/g, '');
    newHtml = prepend + newHtml + postpend;
    allhtml = allhtml.replace(html, newHtml);
    $('#highlightable').html(allhtml);
}

function locations(substring, string) {
    var a = [],
        i = -1;
    while ((i = string.indexOf(substring, i + 1)) >= 0) a.push(i);
    return a;
}
$(function () {

    $('#highlightable').mouseup(highlightAndStore);

});

HTML：

<div id="highlightable">
    <p id="p1">stibulum nisl orci, viverra in sollicitudin sed, iaculis vel erat. Nam lacus quam, volutpat et porta non, consequat ac tortor. Fusce non lorem vitae</p>
    <p>libero imperdiet convallis. Morbi vestibulum viverra ligula, porttitor dapibus justo dictum ut. Pellentesque eget laoreet metus. Curabitur rhoncus consectetur nulla, id imperdiet nulla pellentesque sit amet. Cras sodales arcu ac orci suscipit pulvinar sollicitudin risus gravida. Praesent condimentum erat sit amet ipsum tristique mattis. Cras dolor ante, hendrerit vel suscipit a, pellentesque sit amet felis. Vivamus suscipit, tellus ut sollicitudin pulvinar, odio urna auctor quam, ut bibendum ipsum arcu ac nibh. Phasellus sollicitudin, ipsum at pretium consectetur, arcu nisi auctor quam, a lobortis erat neque viverra diam. Nam congue libero sed est gravida dignissim. Nulla pulvinar condimentum diam in porta. Aenean id interdum odio. Fusce cursus sagittis urna dictum scelerisque. Sed nunc massa, cursus et pharetra at, ullamcorper vel est. Aliquam erat volutpat. Ut accumsan commodo lorem, gravida rutrum diam venenatis eu.</p>
    <p id="p2">stibulum nisl orci, viverra in sollicitudin sed, iaculis vel erat. Nam lacus quam, volutpat et porta non, consequat ac tortor. Fusce non lorem vitae libero imperdiet convallis. Morbi vestibulum viverra ligula, porttitor dapibus justo dictum ut. Pellentesque eget laoreet metus. Curabitur rhoncus consectetur nulla, id imperdiet nulla pellentesque sit amet. Cras sodales arcu ac orci suscipit pulvinar sollicitudin risus gravida. Praesent condimentum erat sit amet ipsum tristique mattis. Cras dolor ante, hendrerit vel suscipit a, pellentesque sit amet felis. Vivamus suscipit, tellus ut sollicitudin pulvinar, odio urna auctor quam, ut bibendum ipsum arcu ac nibh. Phasellus sollicitudin, ipsum at pretium consectetur, arcu nisi auctor quam, a lobortis erat neque viverra diam. Nam congue libero sed est gravida dignissim. Nulla pulvinar condimentum diam in porta. Aenean id interdum odio. Fusce cursus sagittis urna dictum scelerisque. Sed nunc massa, cursus et pharetra at, ullamcorper vel est. Aliquam erat volutpat. Ut accumsan commodo lorem, gravida rutrum diam venenatis eu.</p>
</div>

代码说明

在鼠标向上时，以HTML格式抓取所选文本。然后它获取可突出显示区域内的所有html，并找到此html匹配的第一个实例。然后将整个可突出显示区域的html拆分为子字符串＆＃34; shortenedHtml＆＃34;这是用户选择之前的区域的HTML。然后计算跨度。如果开始和结束跨度的数量相等，那么只需检查选择区域计数即可。但是，如果有更多的跨度开始，则此选择在另一个当前突出显示的区域内开始，因此不要添加跨度开始标记，只是结束。

它还检查所选html中的相同想法，确保span标记不会中断。从我所知道的情况来看，这个位非常有效 - 选择中的任何多余的span标签都会被移除以获得干净的输出。

代码问题：

好的，到目前为止，我有一个重点工作，但它非常错。如果您将警报保留在其中，那么它显然无法工作的原因是索引变得混乱。基本上如果你只选择一个字符的一半，它只是认为你选择了该字符的第一个实例...有没有办法在范围函数中获取索引的实例？如果没有，还有更好的方法吗？我正在考虑选择整个单词我可以直接搜索到第一个空格，但我甚至无法启动，直到这些索引正常工作！

我在想如果有一种方法可以在getSelectionHtml函数中为选择添加临时范围，我可以搜索＆＃34;然后删除它。

请注意 - 我不需要嵌套表等功能可突出显示。

非常感谢

如何获取所选文本的索引

0 个答案: