使用 JavaScript 检测文本中点击的单词
创建允许用户通过单击来选择单词的 JavaScript 脚本时，问题问题是：如何才能高效、优雅地实现这一点？
使用类解析的详细方法
一种常见但乏味的方法涉及解析整个 HTML，将每个单词分割为空格，并将每个单词包装在 中元素。然后添加一个事件监听器来检测对词类的点击，通过$(this).innerHTML获取点击的词。虽然这种方法有效，但其性能和美观性还有很多不足之处。
无需类解析的优化解决方案
要获得更高效、更优雅的解决方案，请考虑以下内容：
第 1 步：捕获选择
使用 window.getSelection() 捕获用户的选择。
第 2 步：识别单词边界
迭代选择范围以确定单击的单词的起点和终点，避免空格。
第 3 步：检索单击的单词
将选择范围内识别出的字符组合起来形成单击的单词。
示例实现
以下 JavaScript 代码提供了此解决方案的实际实现：
$(".clickable").click(function (e) {
s = window.getSelection();
var range = s.getRangeAt(0);
var node = s.anchorNode;
// Find starting point
while (range.toString().indexOf(' ') != 0) {
range.setStart(node, (range.startOffset - 1));
}
range.setStart(node, range.startOffset + 1);
// Find ending point
do {
range.setEnd(node, range.endOffset + 1);
} while (
range.toString().indexOf(' ') == -1 &&
range.toString().trim() != ''
);
// Alert result
var str = range.toString().trim();
alert(str);
});以上是如何使用 JavaScript 高效检测文本中点击的单词？的详细内容。更多信息请关注PHP中文网其他相关文章！
