我在获取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,因为单词名称是句子中的第二个单词
任何帮助将不胜感激
谢谢
答案 0 :(得分:1)
下面的代码将帮助您解决查询
<!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>