时间戳

首页 > 解决方案 > 如何在jQuery中获取窗口选择中的单词数

javascript - 如何在jQuery中获取窗口选择中的单词数

问题描述

我无法在 jQuery 中获取窗口选择中的单词数

这是我编写的一个示例

    $(".highlight_text").on("click", function(e) {
        
         var text = window.getSelection();

        // For diagnostics
        var start = text.anchorOffset;
        var end = text.focusOffset - text.anchorOffset;

        range = window.getSelection().getRangeAt(0);

        var selectionContents = range.extractContents();
        var span = document.createElement("span");

        

        span.appendChild(selectionContents);

        span.style.backgroundColor = "#FCEE4F";
        span.style.color = "black";
        
        var span_text = span.textContent;
        $(".note_details").children(".blue_submit_button").attr("id", span_text);

        range.insertNode(span);


    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">
  <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing     elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <button class="highlight_text">Highlight</button>
</div>

它是一个非常简单的单词荧光笔

但这是他们拥有它的一种方式，所以当用户突出显示一个单词时，它会说出单词的数量

例如

我的名字是鲍勃

如果用户突出显示名称

它应该出现 2 因为单词 name 是句子中的第二个单词

任何帮助将非常感激

谢谢

标签： javascriptjqueryhtml

解决方案

下面的代码将帮助您解决您的查询

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".highlight_text").on("click", function (e) {

                var text = window.getSelection();
                if (text) {
                    // For diagnostics
                    var start = text.anchorOffset;
                    var end = text.focusOffset - text.anchorOffset;
                    var overallText = $('.text').text().split(' ')

                    range = window.getSelection().getRangeAt(0);
                    var selectionContents = range.extractContents();
                    var span = document.createElement("span");



                    span.appendChild(selectionContents);

                    span.style.backgroundColor = "#FCEE4F";
                    span.style.color = "black";

                    var span_text = span.textContent;
                    $(".note_details").children(".blue_submit_button").attr("id", span_text);

                    range.insertNode(span);

                    var count = 0;
                    var isCheck = false;
                    overallText.forEach(function (e) {
                        e = e.replace('\r', '').replace('\n', '');
                        // remove empty space and breaklines
                        if (e && !isCheck) {
                            count++;
                            if (e == span_text.trim()) {
                                isCheck = true;
                                return false;
                            }
                        }
                    })
                    $('#count').text(count)
                }
            });
        });
    </script>
</head>

<body>
    <div class="text">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
        </p>
        <button class="highlight_text">Highlight</button>
    </div>
    <div id='count'></div>
</body>

</html>

推荐阅读