我在 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 是句子中的第二个单词
任何帮助将不胜感激
谢谢
最佳答案
下面的代码将帮助您解决您的查询
<!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>
关于javascript - 如何在 jQuery 中获取窗口选择中的单词数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56301272/