使用 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); });
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3