突出显示用户选择的文本片段

2024-04-21

我有一个<div>with some text<div>我需要突出显示用户选择的文本片段。

我已经部分实现了这个: 这是我的代码 http://jsfiddle.net/Greatshock/fy09jo8w/8/

thisRespondHightlightText(".container");


function thisRespondHightlightText(thisDiv){
    $(thisDiv).on("mouseup", function () {
        var selectedText = getSelectionText();
        var selectedTextRegExp = new RegExp(selectedText,"g");
        var text = $(this).text().replace(selectedTextRegExp, "<span class='highlight'>" + selectedText + "</span>");
        $(this).html(text);
    });
}

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    }
    return text;
}
.highlight {
    background-color: orange;
}
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

但是,我一直致力于解决以下问题:

  1. 即使文本中有多个匹配项,我也需要突出显示用户选择的确切片段。例如,如果用户选择第二个字母t in the <div>with some text<div>, 只有这样t应突出显示,而不是全部或第一个。
  1. 当用户选择全文时,它不会突出显示,但仍保持选中状态。
  1. 我如何在移动设备上实现此功能?问题是mouseup事件没有被触发。

Update

选择 https://developer.mozilla.org/en-US/docs/Web/API/Range & Range https://developer.mozilla.org/en-US/docs/Web/API/Selection API

以下演示使用以下内容:

选择API
.getSelection() https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
.getRangeAt() https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
范围API
.extractContents() https://developer.mozilla.org/en-US/docs/Web/API/Range/extractContents
.insertNode() https://developer.mozilla.org/en-US/docs/Web/API/Range/insertNode
各种各样的
.createElement() https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
.appendChild() https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
.ctrlKey https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey
.textContent https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
.tagName https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName
.parentNode https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode
.removeChild() https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
.createTextNode() https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode

Just select text + ctrl (Mac: select text + ^) and it will wrap a <mark> tag around the selected text. To remove the highlight click + alt (Mac: click + )


Demo 1

选择和范围 API

function mark(e) {
  if (e.ctrlKey) {
    var sel = document.getSelection();
    var rng = sel.getRangeAt(0);
    var cnt = rng.extractContents();
    var node = document.createElement('MARK');
    node.style.backgroundColor = "orange";
    node.appendChild(cnt);
    rng.insertNode(node);
    sel.removeAllRanges();
  }
}

function unmark(e) {
  var cur = e.currentTarget;
  var tgt = e.target;
  if (tgt.tagName === 'MARK') {
    if (e.altKey) {
      var txt = tgt.textContent;
      tgt.parentNode.replaceChild(document.createTextNode(txt), tgt);
    }
  }
  cur.normalize();
}

document.addEventListener('keyup', mark); // ctrl+keyup
document.addEventListener('mouseup', mark);// ctrl+mouseup
document.addEventListener('click', unmark); // alt+click
::selection {
  background: orange
}
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</P>

::selection https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

尝试伪元素::selection


Demo 2

::selection {
  background: orange;
}
<P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</P>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

突出显示用户选择的文本片段 的相关文章

随机推荐

  • Android:带有图标的选项菜单“更多列表”

    我喜欢 Android 在选项菜单中自动显示许多菜单项 当屏幕上的菜单项过多时 它会显示 更多 按钮 我想保持这种方式 但是当您按 更多 时弹出的菜单项中没有菜单图标 有什么办法可以让我否决这个吗 如果没有 当用户单击 更多 时如何显示我自
  • 如何在 C++ 中创建多个向量的组合而无需硬编码循环?

    我有几个数据看起来像这样 Vector1 elements T C A Vector2 elements C G A Vector3 elements C G T up to VectorK elements Note also that
  • 将rodata 与创建它的函数一起保存

    我试图使 rodata 部分位置与其关联的函数内存位置保持一致 我正在使用 GNU 编译器 链接器 裸机 plain jane c 和 STM32L4A6 微控制器 我有一个使用 STM32L4A6 控制器的定制板 其中 1Meg 闪存分为
  • 如何在 UITableView 中显示 NSSet?

    您将如何继续显示NSSet in a UITableView 如您所知 表视图将询问给定行的元素 但由于NSSet元素没有排序 这不能很好地混合 我当前的解决方案是迭代NSSet直到我到达给定索引处的元素 但这确实感觉不对 你可能会问为什么
  • 如何用 Java 从 XML 创建 PDF?

    目前 我正在 Java 中创建一个 XML 文件 并通过使用 XSL XSLT 对其进行转换来将其显示在 JSP 页面中 现在我需要获取该 XML 文件并在 PDF 中显示相同的信息 有没有办法通过使用某种 XSL 文件来做到这一点 我见过
  • 等待协程中侦听器内的数据

    我有一个协程 我想在启动页面期间在 android 启动时启动 我想等待数据返回后再开始下一个活动 做这个的最好方式是什么 目前我们的 android 正在使用实验性协程 0 26 0 目前还无法更改这一点 更新 我们现在使用最新的协程 不
  • 如何在 Python 中使用 httpx(相对于 aiohttp)发出并行异步 HTTP 请求?

    这是基于一个拼写错误 而且是一个简单的错误 不删除 因为它有 httpx 的示例代码 我正在尝试利用杠杆asyncio并行化几个长时间运行的网络请求 因为我是从requests图书馆 我想使用httpx库 由于相似的 API 我的环境是 P
  • 批量插入成功后更新 Kafka 提交偏移量

    我有一个 spring kafka 消费者 它读取记录并将其移交给缓存 计划任务会定期清除缓存中的记录 我想仅在批次成功保存到数据库后更新 COMMIT OFFSET 我尝试将确认对象传递给缓存服务以调用确认方法 如下所示 public c
  • Git 到 TFS 2008 的单向迁移(有历史记录)

    我是 Git 的新手 我正在探索 Git 存储库到 TFS 的单向一次性迁移 有历史记录 我正在研究插件git tfs https github com git tfs git tfs 我找不到关于这个特定场景的任何帮助 维基 博客 在这种
  • 我可以对未映射到表的实体使用 Hibernate 查询语言吗?

    以下是我用来检索的 mySQL 查询HolidayPackages for a given Hotel SELECT pkg idHolidayPackage pkg name FROM holidaypackage pkg INNER J
  • 在 64 位机器中创建 32 位 JavaFx Native Bundle

    我的机器和 IDE 的配置如下 产品版本 NetBeans IDE 7 2 内部版本 201207171143 爪哇 1 7 0 07 Java HotSpot TM 64 位服务器虚拟机 23 3 b01 系统 Windows 7 版本6
  • Pyramid.security:使用 unauthenticated_userid(request) 从数据库获取用户信息真的安全吗?

    我正在尝试使用 Pyramid 文档创建可访问的用户数据缓存 使 用户对象 可用作请求属性 http docs pylonsproject org projects pyramid cookbook en latest auth user
  • Spring 表达语言的映射

    我想使用 SpEL 来评估一些谓词 由于值 属性是动态的 因此我没有特定的 bean 类 因此 我们有一个 hashmap 其中 根据应用程序状态 键映射到不同的 POJO bean 例如 Person person new Person
  • Git 推送失败,“非快进更新被拒绝”

    我已经通过 Git Online 编辑了我的 GIT 存储库 当我尝试推送本地代码更改后 出现错误 Git push failed To prevent from losing history non fast forward update
  • Oracle中如何检查所有字段是否唯一?

    Oracle中如何检查所有字段是否唯一 SELECT myColumn COUNT FROM myTable GROUP BY myColumn HAVING COUNT gt 1 如果出现次数大于 1 即它们不是唯一的 这将返回所有 my
  • Java 中的数据验证和扫描器

    我有一个关于数据验证和扫描仪的问题 下面的代码检查用户输入 除了整数之外的任何内容都是不允许的 并且要求用户重新输入一个值 我的问题是 只有当扫描仪打开时 代码才有效在 while 循环内声明 如果在外部声明扫描仪 则程序将无限执行 这是为
  • 如何在.net core项目中使用SignalR Core监听postgresql数据库?

    我正在开发 net core Web 应用程序 我想监听我的 PostgreSQL 数据库 如果桌面上有任何变化 我必须得到它 所以根据我的研究 我必须使用SignalR Core 我用 SignalR 做了一些示例应用程序 例如聊天应用程
  • pod init 获得未初始化的常量 ActiveSupport::XmlMini::IsolatedExecutionState (NameError)

    mac os 成功安装cocoapods 1 11 2 红宝石 v ruby 3 1 1p18 2022 02 18 修订版 53f5fc4236 x86 64 darwin21 宝石 v 3 3 8 但 exec pod init 收到错
  • django 管理中的多态行为

    问题 假设我有三个类A B和C 其中B是A的子类 C是B的子类 A lt B lt C 当我打开管理并列出所有 A 时 我看到所有 A B 和 C 但是 当我点击其中一个链接查看详细信息并编辑该特定 B 时 我只会看到 B 的字段 即使该实
  • 突出显示用户选择的文本片段

    我有一个 div with some text div 我需要突出显示用户选择的文本片段 我已经部分实现了这个 这是我的代码 http jsfiddle net Greatshock fy09jo8w 8 thisRespondHightl