Javascript:如何找到在长段落中选择了特定文本的哪个实例(例如,一个单词在一段中出现多次)
Javascript: How to find which instance of a particular text (e.g. a word which occurs more than once in a paragraph) was selected in a long paragraph?
我计划开发一个web应用程序。在应用程序的一部分中,用户从段落中选择文本,然后单击保存按钮。
例如,用户从以下文本中选择"苹果"(以粗体显示):
苹果是蔷薇科(蔷薇科)。它是栽培最广泛的树之一果实,以及苹果属众多成员中最广为人知的人类使用的。家苹果树通常被简单地称为苹果树
当用户单击保存按钮时,JS应该将其作为键值对添加到对象中。值应该是所选文本(在这种情况下是apple),而键应该是指示所选文本的哪个实例的东西。原因是"apple"再次出现在给定段落的倒数第二个单词中。
类似于:
var object = new Object();
var textString = window.getSelection().toString();
object.indicator = textString;
我想跟踪用户选择了哪个"苹果"实例(即所选文本)。那么,有可能保留它的踪迹吗
接下来的步骤是存储这个对象,这样当用户再次启动这个页面或回到这里时,我们就会告诉他已经选择了什么。
这个例子没有得到选择了哪个实例(第一个或第二个),但它得到了字符串中的偏移索引,这应该足够了。
<div id="content">An apple is the pomaceous fruit of the Malus domestica tree of the rose family (Rosaceae). It is one of the most widely cultivated tree fruits, and the most widely known of the many members of genus Malus that are used by humans. Malus domestica tree is often simple called as an apple tree.</div>
<button onclick="saveSelection()">Save Selection</button>
<script>
function saveSelection() {
var selection = window.getSelection();
var selectedText = selection.toString();
var selectionInfo = {
offset: selection.anchorOffset,
length: selectedText.length,
text: selectedText
};
localStorage["lastSelection"] = JSON.stringify(selectionInfo);
}
window.onload = function () {
var selectionJSON = localStorage["lastSelection"];
if (selectionJSON) {
selection = JSON.parse(selectionJSON);
alert(JSON.stringify(selection) + "'n" + document.getElementById("content").innerText.substr(selection.offset, selection.length));
}
};
</script>
要获取哪个实例,可以使用regex来匹配以前的实例并获取实例的数量。
var text = "An apple is the pomaceous fruit of the Malus domestica tree of the rose family (Rosaceae). It is one of the most widely cultivated tree fruits, and the most widely known of the many members of genus Malus that are used by humans. Malus domestica tree is often simple called as an apple tree.";
var selection = window.getSelection();
var textString = selection.toString();
var previousText = text.substr(0, Math.max(selection.anchorOffset, selection.focusOffset));
//Escape special regex characters, http://stackoverflow.com/a/6969486/3492895
var textRegex = textString.replace(/['-'[']'/'{'}'(')'*'+'?'.'''^'$'|]/g, "''$&");
//Matches all instances, including current one
var instance = previousText.match(new RegExp(textRegex, "g")).length;
alert("Instance: " + instance);
工作示例:http://testnaman.neocities.org/quicktest6.html
相关文章:
- 匹配一个单词,其中候选人可以跨越顺序组(跨度)
- 如何使用jquery强制一个单词更改大小写等以保留品牌
- 从输入值中删除最后一个单词
- 如何查找一个单词在动态创建的html表行中出现的次数
- Regex或javascript每X个连续单词中有一个单词
- Javascript:当这个单词被点击5次时,下面会显示另一个单词
- Javascript/jQuery替换tamil语言输入框中的最后一个单词
- Javascript(如果var包含一个单词,则仅更改该单词的颜色)
- 使用Javascript双击HTML中的空格时,选择上一个和下一个单词
- 检查字符串是否等于一个单词和一个数字
- Regex:使用javascript测试最后一个单词后的url中是否存在最后一个斜杠
- 使jQuery自动完成功能适用于多个单词(“跳过”一个单词)
- 使用JavaScript匹配URL中的最后一个单词
- 添加一个“;以及“;到String-js/Angular中的最后一个单词
- 我怎样才能把p中的一个单词包装在a标签中呢
- 在 javaScript 中定义函数之前,什么意思是“一个单词:”
- UIWeb查看搜索问题中出现的下一个单词
- 计算一个字母在一个单词中出现的次数
- 如何在文本区域中获取最后一个单词的位置
- 如何删除句点和前一个单词之间的空格