登录 注册

[js] 解决双击选取内容末尾带空格的问题

本贴最后更新于 406 天前，其中的信息可能已经天翻地覆

效果

使用前, 双击效果

image.png

使用后效果, 如果有空格会取消选中, 且会闪一下, 不过日常使用不影响

image.png

js 代码

(()=>{
    document.addEventListener('dblclick', function() {
        const selection = window.getSelection();
        const selectedText = selection.toString();
  
        // 如果选中的文本后面有空格，就处理掉末尾空格
        if (selectedText != " " && selectedText.endsWith(' ')) {
            const range = selection.getRangeAt(0);
            const startOffset = range.startOffset;
            const endOffset = range.endOffset - 1; // 移除末尾空格
  
            // 设置新的范围
            range.setStart(range.startContainer, startOffset);
            range.setEnd(range.endContainer, endOffset);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    });
})()
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    28446 引用 • 119783 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    285 引用 • 1986 回帖
2 引用
建议删除双击复制选择多出来的空格 • wilsons
疑问：双击英文单词带不带空格？ • HugZephyr
1 操作
HugZephyr 在 2024-11-10 19:41:51 更新了该帖
杭州 位置
2 感谢
1 关注
3 收藏
2 引用
1 操作
9 回帖
5
3
522 100 6 238 1 177

相关帖子

9 回帖
[js] 解决双击选取内容末尾带空格的问题

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • fpxkHaj8dE • • 1 赞同

    有一个问题.

    如果双击的对象是已经加粗过的, 就不会被选中

    1 回复
  • HugZephyr •
    付费者 作者

    截个图, 标记一下呗, 我这种看着没啥问题

    image.png

    1 回复
  • JeffreyChen •
    订阅者 付费者 支持者 捐赠者 先知 恶龙

    看录屏：

  • HugZephyr •
    付费者 作者

    @JeffreyChen @fpxkHaj8dE 问题已经解决, 帖子的代码已经更新了

  • JeffreyChen • • 1 评论
    订阅者 付费者 支持者 捐赠者 先知 恶龙

    有多个空格的情况下还是会选中一些空格（只去掉了最右边的一个空格）：

    image.png

    基于刚刚 bug 的原理, 这种不太好处理, 我研究下
    HugZephyr •
  • JeffreyChen • • 1 • 2 评论
    订阅者 付费者 支持者 捐赠者 先知 恶龙

    我让 GPT 改了一下：

    (() => {
    document.addEventListener('dblclick', function() {
        const selection = window.getSelection();
        const selectedText = selection.toString();

        // 如果没有选中任何有效文本，则直接返回
        if (!selectedText.trim()) {
            return;
        }

        // 处理选中的文本
        const range = selection.getRangeAt(0);

        // 如果选中的文本以空白字符结尾，去掉末尾所有空白字符
        const whitespaceMatch = selectedText.match(/\s+$/);
        if (whitespaceMatch) {
            const whitespaceCount = whitespaceMatch[0].length;
            const endOffset = range.endOffset - whitespaceCount;

            // 设置新的范围
            range.setEnd(range.endContainer, endOffset);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    });
})();
    1 回复
    我试了一下, 会有个小 bug, 也是我刚刚提到的那种: 加粗如果有空格的话, 就会有问题, 不过场景不大, 感觉可以不用考虑
    HugZephyr • • 1
    @EmberSky 这个 BUG 是怎么表现的？
    JeffreyChen •
  • HugZephyr •
    付费者 作者

    像这种的, endOffset 会是负数, 导致代码报错

    image.png

    1 回复
  • JeffreyChen • • 1 赞同
    订阅者 付费者 支持者 捐赠者 先知 恶龙

    我又让 GPT 改了一个：（行级元素末尾的空格 GPT 也去不掉，但至少不报错了）

    (() => {
    document.addEventListener('dblclick', function(event) {
        // 判断当前双击的元素是否在 .protyle-wysiwyg 元素内
        const targetElement = event.target.closest('.protyle-wysiwyg');
        if (!targetElement) {
            return; // 如果不在指定元素内，则直接返回
        }

        const selection = window.getSelection();
        const selectedText = selection.toString();

        // 如果没有选中任何有效文本，则直接返回
        if (!selectedText.trim()) {
            return;
        }

        // 处理选中的文本
        const range = selection.getRangeAt(0);
        const endContainer = range.endContainer;

        // 如果选中的文本以空白字符结尾，去掉末尾所有空白字符
        const whitespaceMatch = selectedText.match(/\s+$/);
        if (whitespaceMatch) {
            const whitespaceCount = whitespaceMatch[0].length;
            const endOffset = Math.max(0, range.endOffset - whitespaceCount); // 确保不小于0

            // 确保结束偏移量不超过文本节点的长度
            const newEndOffset = Math.min(endOffset, endContainer.length);

            // 设置新的范围
            range.setEnd(endContainer, newEndOffset);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    });
})();
  • JeffreyChen • • 1 • 2 评论
    订阅者 付费者 支持者 捐赠者 先知 恶龙

    我用 DeepSeek 重新写了一个：

    /**
 * 双击词汇不选中后面的空格 JS片段
 * 主要功能：
 * 1. 处理普通文本元素的双击选择，自动去除尾部空白字符
 * 2. 处理输入框(input/textarea)的双击选择，分为两种情况：
 *    - 双击空白字符：自动扩展选择连续的空白字符
 *    - 双击文本：自动去除选中文本尾部的空白字符
 */
document.addEventListener('dblclick', function(event) {
  const target = event.target;
  
  // 检查目标元素是否是输入框(input或textarea)
  const isInput = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;

  if (!isInput) {
    // ======================
    // 处理普通文本元素的选择
    // ======================
    
    // 获取当前文本选择对象
    const selection = window.getSelection();
    
    // 检查是否有选中的文本内容
    if (!selection.toString().trim() || selection.rangeCount === 0) return;
    
    // 获取第一个选择范围
    const range = selection.getRangeAt(0);
    if (range.collapsed) return;  // 如果选择范围已折叠(无实际选中内容)，则返回
    
    // 安全校验：确保操作的是文本节点
    const isTextNode = node => node.nodeType === Node.TEXT_NODE;
    if (!isTextNode(range.startContainer) || !isTextNode(range.endContainer)) return;
    
    // 计算并去除尾部空白字符
    const selectedText = range.toString();
    const trailingSpaces = selectedText.length - selectedText.trimEnd().length;
    
    // 安全校验：确保偏移量有效
    const newEndOffset = Math.max(range.startOffset, range.endOffset - trailingSpaces);
    if (newEndOffset > range.endContainer.length || newEndOffset < 0) return;
    
    // 创建新的选择范围(去除尾部空白)
    const newRange = document.createRange();
    newRange.setStart(range.startContainer, range.startOffset);
    newRange.setEnd(range.endContainer, newEndOffset);
    
    // 应用新的选择范围
    selection.removeAllRanges();
    selection.addRange(newRange);
    return;
  }

  // ======================
  // 处理输入框元素的选择
  // ======================
  
  // 获取输入框的选中范围
  const start = target.selectionStart;
  const end = target.selectionEnd;
  if (start === end) return;  // 没有选中内容时直接返回
  
  const value = target.value;
  const selectedText = value.substring(start, end);

  // 情况1：选中的是空白字符（包括全角空格\u3000）
  if (/^[\s\u3000]+$/.test(selectedText)) {
    // 查找连续的空白字符范围
    let left = start;
    let right = end;

    // 向左扩展选中连续的空白字符
    while (left > 0 && /[\s\u3000]/.test(value[left - 1])) left--;

    // 向右扩展选中连续的空白字符
    while (right < value.length && /[\s\u3000]/.test(value[right])) right++;

    // 设置新的选择范围
    target.setSelectionRange(left, right);
    return;
  }

  // 情况2：选中的是文本内容（去除尾部空白）
  const trailingSpaces = selectedText.length - selectedText.trimEnd().length;
  if (trailingSpaces > 0) {
    // 调整选择范围，去除尾部空白
    target.setSelectionRange(start, end - trailingSpaces);
  }
});
    1 操作
    JeffreyChen 在 2025-10-21 05:18:22 更新了该回帖
    大佬, 你平时不睡觉的么
    HugZephyr •
    @HugZephyr 不上课的话就时常通宵了
    JeffreyChen •
请输入回帖内容 ...
HugZephyr
杭州
回帖
540
 帖子
80
 积分
14979

近期热议

推荐标签 标签

  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 403 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台，同时可以将自己看到的精彩内容分享到微信朋友圈。

    135 引用 • 798 回帖 • 2 关注
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    14 引用 • 84 回帖
  • 工具

    子曰：“工欲善其事，必先利其器。”

    308 引用 • 773 回帖
  • Visio
    1 引用 • 2 回帖 • 1 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    174 引用 • 414 回帖 • 344 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 350 关注
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 458 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 1 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 636 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 847 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 724 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 1 关注
  • sts
    2 引用 • 2 回帖 • 260 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 702 关注
  • 分享

    有什么新发现就分享给大家吧！

    251 引用 • 1801 回帖 • 1 关注
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    34 引用 • 333 回帖 • 1 关注
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    201 引用 • 120 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 1 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 565 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    110 引用 • 153 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 429 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用（如 Word、Excel 和 PowerPoint）与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起，可帮助你在任何设备上完成操作。

    6 引用 • 35 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 56 关注

最新标签