首页 > web前端 > js教程 > 如何使用 JavaScript 高效检测文本中点击的单词?

如何使用 JavaScript 高效检测文本中点击的单词?

Patricia Arquette
发布: 2024-10-28 03:10:30
原创
1051 人浏览过

How to Efficiently Detect Words Clicked on in Text with JavaScript?

使用 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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板