计算所选文本的位置 javascript/JQuery?

2024-01-09

如何通过计算紧随正文标记之后的偏移量来检索所选文本的位置?

例如考虑以下 html,

<body> <div>hi</div> <div>dude!</div> </body>

在从“i”(在 hi 中)到“du”(在 dude 中)中选择时,我需要将 2 作为起始位置,将 4 作为结束位置。

注意:忽略标签元素。

Javascript 更好!


这里有一些简单、朴素的代码来执行此操作,很可能适合您的用例。它不考虑任何可能不可见的文本(例如,通过 CSS 或通过位于 or 元素内部),并且可能存在浏览器差异(IE 与其他所有内容)和换行符,并且不考虑折叠的空白(例如 2 个或多个连续空格字符折叠为页面上的一个可见空格)。但是,它确实适用于所有主要浏览器中的示例。

现场演示:http://jsfiddle.net/UuDpL/2/ http://jsfiddle.net/UuDpL/2/

Code:

function getSelectionCharOffsetsWithin(element) {
    var start = 0, end = 0;
    var sel, range, priorRange;
    if (typeof window.getSelection != "undefined") {
        range = window.getSelection().getRangeAt(0);
        priorRange = range.cloneRange();
        priorRange.selectNodeContents(element);
        priorRange.setEnd(range.startContainer, range.startOffset);
        start = priorRange.toString().length;
        end = start + range.toString().length;
    } else if (typeof document.selection != "undefined" &&
            (sel = document.selection).type != "Control") {
        range = sel.createRange();
        priorRange = document.body.createTextRange();
        priorRange.moveToElementText(element);
        priorRange.setEndPoint("EndToStart", range);
        start = priorRange.text.length;
        end = start + range.text.length;
    }
    return {
        start: start,
        end: end
    };
}

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

计算所选文本的位置 javascript/JQuery? 的相关文章

  • 如何使用谷歌地图检测一个点是否在多边形内部?

    我想检测到google maps LatLng是在一个里面google maps Polygon 我怎样才能做到这一点 Cheers 你可以使用这个谷歌地图V3 google maps geometry poly containsLocat
  • 在 IE 中使用
    标签时,填充不起作用

    我在我的应用程序中使用 HTML5 标签 标签的填充在 chrome ff 和 safari 中工作正常 但在 IE 中不起作用 我尝试添加显示 块 与部分样式 但它没有用 有什么解决办法吗 许多旧浏览器不理解 HTML5 标签 例如sec
  • 无法将中间件与 Firebase 和 NuxtJS 3 一起使用

    我正在尝试在示例项目中使用 Firebase 身份验证 身份验证按预期工作 但是一旦我想使用中间件来阻止用户访问管理页面或在已经登录的情况下访问登录页面 这是不可能的 我已经尝试了几个小时 但没有任何效果 这是我的package json
  • 在文档片段中查找注释或文本节点

    我必须清理 Nokogiri HTML DocumentFragment 文档 删除仅包含空格的注释节点和文本节点 这是一个例子 html p paragraph p p paragraph p p paragraph p doc Noko
  • 如果验证失败,如何在 ASP.NET MVC 中阻止 jquery ajax 提交

    我在用ASP NET 5 MVC RC1 我的 ASP NET MVC 使用的 jquery 验证插件是默认 ASP NET 5 模板项目使用的标准 jquery validate js jQuery Validation Plugin v
  • 为什么 if 语句中的赋值等于 true?

    首先我要说的是我理解两者之间的区别 and 第一个用于将右侧值分配给左侧变量 第二个用于比较两个值的等价性 第三个不仅用于等价性 还用于类型比较 即true 1会回来false 所以我知道almost任何时候你看到if 作者很有可能打算使用
  • javascript 多维类型数组 (Int8Array) 示例

    我尝试使用类型数组而不是数组来减少内存 function createarrayInt8 numrows numcols number var arr new Int8Array numrows for var i 0 i lt numro
  • Ajax调用完成后执行函数

    我是 Ajax 新手 我尝试在使用 for 循环时使用 Ajax Ajax 调用之后 我正在运行一个使用 Ajax 调用中创建的变量的函数 该函数只执行两次 我认为 Ajax 调用可能没有足够的时间在循环开始之前进行调用 有没有办法在运行
  • charset-utf8 和字符实体

    我建议将我的 windows 1252 XHTML 网页转换为 UTF 8 我的编码中有以下字符实体 39 撇号 9658 右指针 9668 左指针 如果我使用编辑器更改字符集并将页面保存为 UTF 8 撇号保留为字符实体 指针被转换为代码
  • 添加元数据到快速路线

    有什么方法可以将元数据添加到 Express 的路线中吗 例如 app get some route function req res some meta data 我正在寻找一种针对我的节点应用程序的 AOP 方法 因此我想通过身份验证和
  • 如何在没有查询参数的情况下重新加载页面?

    假设我想重新加载www domain com abc num 4 但我想重新加载www domain com abcONLY 问号后没有所有内容 window location window location href split 0
  • Boolean("false") 返回 true..还有其他选择吗?

    我正在使用 jquery 将 true 和 false 字符串写入 data html 属性 但是 当我将 false 写入其中一个属性 然后检查它是否为 false 时 它 会返回 true 我还在网上读到它应该这样做 这真的毫无意义 有
  • asp.net mvc jquery 下拉验证

    我如何使用不显眼的 javascript 验证下拉列表 作为所需验证器的验证文本框 但它不适用于下拉列表 需要更改不显眼的 js 文件吗 或者还有其他选项来验证下拉列表吗 我想在我的 javascript 中检查 form validate
  • 保留以下文本的标题

    我正在使用 css 列计数功能将我的部分分成两列 在一个页面上 我在第一列的底部有一个 h3 标题 在下一列的顶部有一个 p 段落 我想保留该段落的前几句话的标题 我可以将其与整个段落一起包装在使用 inline block 样式的 div
  • 检测浏览器是否支持 contentEditable?

    There s 这个问题 https stackoverflow com questions 3497942 browser detect contenteditable features 但发布的解决方案是浏览器嗅探 我试图避免这种情况
  • 插入四个空格而不是制表符

    我试图在按下 Tab 键时插入四个空格 我正在使用以下代码 请参阅spaces t 但是当我将其切换到spaces 当我按 Tab 时只插入一个空格 我还尝试了 function textarea keydown function e va
  • 动态 jquery 对话框弹出窗口

    我只使用过已知数量的 JQuery 对话框 并且在使动态版本正常工作时遇到了各种麻烦 希望有人能帮助我解决这个问题 这是我用已知数字执行此操作的方法 opener1 click function dialog1 dialog open di
  • 如何找出javascript中加载了哪些javascript?

    继另一个问题的评论之后 我问自己是否有办法获取页面上加载的所有 js 代码的列表 就像 Firebug 或 chrome Inspector 所做的那样 有没有一种纯javascript的方法 一种方法是抓取脚本标签 但这样你可能会错过动态
  • jRails 是 Rails + jQuery 必须的吗?

    我是rails新手 使用rails 2 3 10 并且想使用jquery 特别是jquery ui 该项目是一个全新的项目 我计划使用 jquery ui 中的一些小部件 如 datapicker 和 selectable 等 我听说可以安
  • 为什么转换 new.Date() .toISOString() 会改变时间?

    我正在以两种不同的格式在数据库中插入日期 这是作为日期时间插入 var mydate mydate new Date document getElementById clockinhour value mydate toISOString

随机推荐

  • 用空字符串初始化所有字符串成员

    我想将对象的所有 String 成员设置为空字符串 如果它们为空 伪代码 foreach member in object if member instanceof String and member null member 实现这一目标的
  • 禁用 Flex CSS 类型选择器警告?

    我正在构建一个较大的 Flex 项目 其中包含多个模块 生成多个 SWF 的单个 Flex 项目 现在 我有一个 css 文件 正在主 SWF 标记中加载
  • 使用 JavaScript 更改输入字段的背景颜色

    我正在制作一个表单 并将输入字段设置为仅使用 JavaScript 进行读取 我想将只读属性的默认颜色更改为绿色或黄色 HTML
  • Xcode 6:如何禁用优化 (Swift)

    调试期间不会触发断点 我发现这是因为优化了代码 如何禁用优化 我浏览了每个工具栏 我能找到的最接近的选项是Product gt Perform Action gt Generate Optimisation Profile Xcode 说
  • 读取 JSF Web 应用程序静态代码中的 .properties 文件

    我想从静态块中的属性文件获取数据库连接参数 属性文件位置是WEB INF classes db properties 我会更喜欢使用getResourceAsStream 方法 我尝试了很多方法 但都返回了null private stat
  • 返回日期没有返回小时和分钟

    这是我的代码 CREATE OR REPLACE FUNCTION GET DATE P DAYS IN NUMBER RETURN DATE AS V DATE DATE BEGIN V DATE SYSDATE P DAYS DBMS
  • Odata Url 降序转换

    我需要按患者的 Visidate 降序获取数据 所以我尝试了这样的网址 192 168 1 105 33396 FalconCPDataService svc DEPhysicians format json expand DEPatien
  • NUnit:字典断言

    我想要一个一班轮 在 NUnit 中 断言两个字典是否相同 即 我想要以下代码的简洁版本 public static void DictionaryAssert
  • WPF:触发动画 - 沿 Y 轴向下移动控件

    我有一个想要向下移动的控件MouseOver 不幸的是 当我将鼠标悬停在上面时 动画不会运行 但背景颜色会改变 Toolkit Dialog是一个继承的自定义对话框控件ContentControl 另外 在最终实现中我不会使用 MouseO
  • 在 Android 上获取用户当前位置的最简单、最可靠的方法是什么?

    The LocationManager对于只需要偶尔粗略估计用户位置的应用程序来说 Android 上的 API 似乎使用起来有点痛苦 我正在开发的应用程序本身并不是真正的位置应用程序 但它确实需要获取用户的位置才能显示附近企业的列表 它不
  • Rails 中的 Carrierwave 未加载默认 URL

    我在 Carrierwave 上传器中设置默认图像时遇到问题 它似乎在 URL 前面附加了一个奇怪的类 但不渲染图像 请参阅下面的我的代码 Helper encoding utf 8 class UserpicUploader lt Car
  • 从DataTable中获取布尔值

    如何检索数据集中的布尔值 我使用的是 Visual Studio 2003 我正在尝试以下操作 但它不起作用 if product inactive don t display and redirect to main page if db
  • 将项目数据传递给反应模式

    我有一张地图 它渲染了一些项目 其中一行在下面 a this setState openDeleteModal true gt Delete a 显然 我想在用户单击删除时打开一个模式 但我必须传递一些信息 例如项目名称 项目 ID 来执行
  • switch执行所有case语句

    有人能解释一下为什么我的循环从 0 到 7 吗 我只需要获取前 3 种情况 但程序正在经历所有情况 代码位于 show 方法中 for brojac 0 brojac lt 3 brojac switch brojac case 1 fig
  • 从 SqlDataReader 创建 JSON 字符串

    UPDATE 我想到了 看看我下面的回答 https stackoverflow com questions 5554472 create json string from sqldatareader 5597472 5597472 我正在
  • PHP、MySQL、SELECT 问题

    您好 我有一个看起来很复杂的问题 但我会尽力解释得更好 这是一个逻辑问题 我有一个数据库表 该数据库表 我们称之为表 A 包含一些字符串 字符串由以下行组成 ID auto increment Text Date Time Type IDA
  • Google Cloud Run 中的 PHP 服务突然停止响应所有传入请求

    我正在 Google Cloud Run 中运行 PHP 8 1 后端应用程序 后端连接到在 Google Cloud SQL 中运行的 MYSQL 数据库 在过去的两周里 我们发生了三次完全中断的情况 后端服务器不响应任何请求 导致我们的
  • C++ 通过以非抽象子类为参数的方法重写引用抽象类作为参数的纯虚方法

    我有以下代码 struct A f 0 struct Aa A f struct B void foo A 0 struct Bb B void foo Aa 现在我无法创建Bb类实例 因为我没有覆盖foo从课堂上B与所需的参数 我怎样才能
  • 是否可以使 setSystemUiVisibility() 影响整个系统,而不仅仅是您的应用程序?

    我希望制作一个应用程序 使用来自 Galaxy Nexus 的代码将软按钮变暗为点这个答案 https stackoverflow com a 8602997 183929 为了完整起见 这是代码 getWindow getDecorVie
  • 计算所选文本的位置 javascript/JQuery?

    如何通过计算紧随正文标记之后的偏移量来检索所选文本的位置 例如考虑以下 html div hi div div dude div 在从 i 在 hi 中 到 du 在 dude 中 中选择时 我需要将 2 作为起始位置 将 4 作为结束位置