Question

我是JQuery的新手。我在div中有一个文本。当用户双击一个单词时，我想选择所有单词的外观。问题是我不知道如何引用所选单词。有谁能够帮我？提前致谢

Answer 1

代码找到双击的单词，然后在span中包装单词的所有实例。可能有更好的方法可以做到这一点但是，正如你从上面的jsFiddle所看到的，这确实有效。

这是代码（从多个来源快速拼凑而成）：

<script type="text/javascript">
    function getSelectedText() {
        var txt = '';
        if (window.getSelection) {
            txt = window.getSelection();
        } else if (document.getSelection) {
            txt = document.getSelection();
        } else if (document.selection) {
            txt = document.selection.createRange().text;
        }
        return txt;
    }

    function deselectText() {
        if (window.getSelection) {
            window.getSelection().removeAllRanges();
        } else if (document.getSelection) {
            txt = document.getSelection().removeAllRanges();
        } else if (document.selection) {
            txt = document.selection.empty;
        }

    }

$(document).ready(function() {  
    $('#content').dblclick(function() {
        $('.highlight').removeClass('highlight');
        var t = getSelectedText();
        var regex = new RegExp(t, "gi");
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"highlight \">" + matched + "</span>";});
        deselectText();
    });

});
</script>

Answer 2

试试这个：

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Answer 3

在堆栈上有一个先前的答案，可以使用段落改为div。

Here

您可以更改警报以查找文档中其他位置的文本并突出显示它们。

Answer 4

这是一个示例，它在每个单词周围放置一个范围，然后突出显示具有相同文本的所有跨距。 http://jsfiddle.net/6xsNK/3/

$('.para').each(function() {
    var words = $(this).text().split(' ');
    var el = $(this).empty();
    $(words).each(function(i) {
        el.append($('<span>').text(this+' '));
    });
});

$('.para span').dblclick(function() {
    var t = $(this).text();
    var count = $('.para span').removeClass('hilite').filter(function() { return $(this).text() == t;}).addClass('hilite').size();
    alert(count+' match(es) found');
});

使用jQuery选择双击单词的所有实例

4 个答案: