如何获取光标下的单词?

2024-02-10

假设有一个mousestop事件附加到整个文档,找出确切事件的最佳方法是什么word当鼠标停止移动时,在光标下方(如果有任何文本)?

我可以从事件处理程序获取底层(jQuery)元素 -$(document.elementFromPoint(e.clientX, e.clientY))- 但接下来会发生什么呢?

到目前为止,我的想法是用其副本替换 hit 元素中的所有文本节点,其中每个单词都包含在 DOM 元素中(还不知道是哪一个),然后调用$(document.elementFromPoint(e.clientX, e.clientY))再次获取仅包含鼠标下的单词的元素。
但这似乎是一个复杂的计划,我想知道我是否错过了一些更简单的东西。


好吧,到目前为止还没有什么神奇的技巧,所以这是一个沉闷无聊(但有效)的解决方案:

  $(document.body).mousemove(function(e){

    var onmousestop = function() {
      function getHitWord(hit_elem) {
        var hit_word = '';
        hit_elem = $(hit_elem);

        //text contents of hit element
        var text_nodes = hit_elem.contents().filter(function(){
          return this.nodeType == Node.TEXT_NODE && this.nodeValue.match(/[a-zA-Z]{2,}/)
        });

        //bunch of text under cursor? break it into words
        if (text_nodes.length > 0) {
          var original_content = hit_elem.clone();

          //wrap every word in every node in a dom element
          text_nodes.replaceWith(function(i) {
            return $(this).text().replace(/([a-zA-Z-]*)/g, "<word>$1</word>")
          });

          //get the exact word under cursor
          var hit_word_elem = document.elementFromPoint(e.clientX, e.clientY);

          if (hit_word_elem.nodeName != 'WORD') {
            console.log("missed!");
          }
          else  {
            hit_word = $(hit_word_elem).text();
            console.log("got it: "+hit_word);
          }

          hit_elem.replaceWith(original_content);
        }

        return hit_word;
      }

      var hit_word = getHitWord(document.elementFromPoint(e.clientX, e.clientY));
      ...
    }
  }

还涉及一些其他微妙之处(例如事件“降噪”、保持替换的 dom 上下文(例如选择)等等),但您明白了。

Here https://stackoverflow.com/questions/219322/how-can-i-use-javascript-timing-to-control-on-mouse-stop-and-on-mouse-move-events您可以了解如何设置 mousestop 事件。

EDIT:

在 ICE 中制作自定义 html 元素可能不是那么简单(谁会想到?)。查看更多here http://msdn.microsoft.com/en-us/library/ms531076(VS.85).aspx.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何获取光标下的单词? 的相关文章

  • 如何使用 Angularjs 检查模块中的指令或控制器是否可用

    在 angularjs 中 给定一个模块 如何检查给定一个模块是否存在指令 控制器 我有一个模块 我想知道是否已加载某些特定指令 下面是一些示例代码 var module angular module myModule check if c
  • 在 TypeScript 中迭代对象的键和值

    在纯 JavaScript 中 我们可以迭代对象属性和值 如下所示 const values Object keys obj map key gt obj key 在 TypeScript 中 此语法是错误的 因为 TS 编译器显示以下消息
  • 在 PHP 中合并文件块

    出于教育目的 我想创建文件块上传 你们怎么知道所有块何时上传 我试图从temp并重命名它们 使它们按正确的顺序排列 然后与最后一个块将它们合并在一起 然而 我猜最后发送的并不是最后收到的 所以fopen on chunks 失败 因为它们尚
  • 在 javascript 中循环 html 复选框

    实际上我有一个关于如何在java脚本中循环复选框的问题 假设我在jsp循环中创建了html复选框 我希望在javascript中对这些复选框进行验证 我应该怎么做 通常对于单个对象 我们可以执行 window document form c
  • d3js v5 + Topojson v3 关于加入 csv 和 json 的优化

    为了制作地图 我需要将一些值从 csv 导入到 json直接在代码中 为了加载 json 和 csv 文件 我使用 Promise 对象的异步操作 并使用两个循环和一个公共键在 json 文件上添加新属性 for var i 0 i lt
  • 无法获取子 DOM 元素

    注 由于问题有点复杂 为了可读性对代码进行了抽象 We ve a
  • 查找第一个可滚动父级

    我遇到这种情况 需要将元素滚动到视口中 问题是我不知道哪个元素是可滚动的 例如 在纵向中 主体是可滚动的 而在横向中 它是另一个元素 还有更多情况会更改可滚动元素 现在的问题是 给定一个需要滚动到视口中的元素 找到其第一个可滚动父元素的最佳
  • React Native 中循环 Json 并显示

    How do I go about looping the result i retrieved from Json render function console log this state list contents
  • 指令可以从父作用域中删除自身吗

    假设我有以下代码 div div div div 我的自定义指令有一个独立的范围 定义为 app directive customDirective function log return restrict E templateUrl te
  • SWC with JavaScript:如何处理 CSS 导入以及如何绝对导入?

    TL DR 如何告诉 SWC 编译 React 组件中导入的 CSS 文件 如何告诉 SWC 在测试和 React 组件中编译绝对导入 这是一个最小的可重现示例 https github com janhesters riteway swc
  • IE7 真的不支持indexOf javascript 吗? [复制]

    这个问题在这里已经有答案了 可能的重复 数组上的 indexOf 函数在使用 JavaScript 的 IE7 8 中不起作用 https stackoverflow com questions 11544983 indexof funct
  • jQuery 解析 JSON

    当我尝试解析 JSON 验证的字符串时收到此错误 JSON parse 意外字符 当我删除需要转义的字符 style width 400px 时 它完美地工作 我缺少什么 在使用 parseJSON 之前是否有一种独特的方法来转义字符 va
  • 在单页应用程序上重用 Google Maps API 实例

    假设我有一个单页应用程序 Angular JS 应用程序 并且我在元素 id 上绘制一个 Google 地图实例googleMap var mapInstance new google maps Map document getElemen
  • 接近堆限制的无效标记压缩分配失败 - JavaScript 堆内存不足

    我正在使用 Angular 7 2 当我进入ng serve 我面临以下问题 致命错误 接近堆限制的无效标记压缩分配失败 JavaScript 堆内存不足 这意味着什么 我该如何解决这个问题 完整的错误消息是 FATAL ERROR Ine
  • 如何使用 HTML5 在画布上绘制心电图监视器?

    我尝试使用canvas html5绘制心电图系统 几乎我即将完成我的波浪正在移动 但不是连续地重复 但我想绘制波浪是从左到右连续移动的 下面的链接是示例 Ex https www youtube com watch v wuwBfSpVEg
  • Symfony2 中的 Composer 创建相同的资源两次(jquery、jqueryui)

    我将 jquery 和 jqueryui 添加到composer json require components jquery 1 11 dev components jqueryui 1 10 4 作曲家正在下载这两个库并将它们放入供应商
  • 如何将所有后代节点和链接设置为与 2 级祖先相同的颜色?

    我有一个 d3 js 树 其后代节点接收其 2 级祖先的节点颜色 这在级别 2 到级别 3 之间有效 但在级别 4 及以上级别停止工作 相关代码 var colourScale d3 scale ordinal domain MD Prof
  • 如何让浏览器后退按钮通过 AJAX 调用带您返回?

    我有一个页面 上面有很多动态生成的复选框 当用户单击这些复选框时 页面上的许多内容会通过 ajax 动态更改 最终用户抱怨 在点击提交然后点击后退按钮更改某些内容后 他们的选择被破坏了 他们必须重新做一遍 我见过一些网站 gmail fac
  • 如何从 fetch API 返回 json 响应

    我有一个像这样的函数 check auth fetch Urls check auth credentials include method GET then response gt if response ok return respon
  • 在 JSON 对象中存储和发送原始文件数据

    我正在寻找一种方法来传输任何文件类型的原始文件数据和任何可能的内容 我的意思是文件和文件内容都是用户生成的 在 Backbone 前端中使用 xhr ajax 调用两种方式针对 Django 后端 编辑 也许问题仍然不清楚 如果您在 IDE

随机推荐