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

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(使用前将#替换为@)

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

  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • 如何获取传单标记簇中点击事件的图块?

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • nodejs mocha suite 未定义错误

    我正在尝试使用摩卡运行一些测试 但似乎无法克服这个错误 E tdd nodejs cart gt mocha cart test js node js 201 throw e process nextTick error or err Re
  • 使用php表单更改href链接

    我正在制作一个带有搜索栏的网站 我想让搜索栏在 搜索 并显示结果后具有交互性 所以我希望 href 根据正在使用的 Id 进行更改 例如 有人搜索 Pinecones 如果它在数据库中 它将有一个 ID 在本例中是 4 一旦他们搜索它 它就
  • 获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML

    试图找出如何让链接实际呈现为链接 现在 在我从 Json 文件中读取这行文本后 React 将超链接渲染为文字文本 而不将其渲染为链接 一些数据 json about John has a blog you can read a href
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • 在overlayImage中应用滤镜的方法在哪里?

    我想在overlayImage中应用一个过滤器 唯一的方法是在渲染后在整个画布上应用过滤器 对此没有内置支持 但很容易 破解 var overlayImageUrl load overlay image first fabric Image
  • 如果多个键是相同的 JS,则对对象中的值求和

    例如我有 5 个对象 row aa col 1 value 1 row bb col 2 value 1 row bb col 3 value 1 row aa col 1 value 1 row aa col 2 value 1 我想对值
  • 有没有好的 JQuery twitter 小部件可以循环推文?

    我想知道是否有任何 JQuery 小部件提供了循环加载推文的功能 例如在官方小部件中http twitter com about resources widgets widget profile http twitter com about
  • HTML5 有效的命名空间标签前缀

    验证我的页面时 W3 Validator 会给我一个错误
  • 为 Meteor 数据创建编号列表

    有没有办法获取 Meteor 集合中项目的编号列表的 编号 我知道我可以在 html 中做到这一点 但我觉得如果我可以在 spacebars 中放置一些东西 那么样式会更容易 如果我可以使用更好的术语 请告诉我 像这样的东西 前 20 部电
  • 如何检查 Map 或 Set 是否为空?

    对于 JavaScript 中的传统对象 使用以下命令很容易检查它是否为空 Object keys method const emptyObj console log Object keys emptyObj length 0 true i
  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本
  • 为什么 JSON 结果可以是布尔值而不是对象或数组?

    From JSON 网站 http json org JSON 建立在两种结构之上 名称 值对的集合 在各种语言中 这被实现为对象 记录 结构 字典 哈希表 键控列表或关联数组 值的有序列表 在大多数语言中 这被实现为数组 向量 列表或序列
  • 为什么从浏览器上传到 S3 时出现 403 错误?

    因此 我尝试查看此处之前的答案 但似乎没有任何效果 我正在使用 Dropzone 它似乎发出 OPTIONS 请求来获取所有允许的 CORS 相关信息 但它似乎没有正确返回 因此 通过查看 Chrome 开发工具 我有以下请求标头 Host
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • 是否可以使“HTML 到语音”与“文本到语音”相同?

    我有一个奇怪的要求 在我现有的应用程序中我有Text2Speech为此 我使用了AVSpeechSynthesizer 到语音文本 但现在要求发生了变化 现在我需要将 HTML 文件数据转换为文本 例如HTML2Speech 我们可以想到的

随机推荐

  • 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