如何检查文本是否突出显示（跨浏览器）答案

【问题标题】：How to check if text is highlighted (cross-browser)如何检查文本是否突出显示（跨浏览器）
【发布时间】：2019-12-23 13:14:52
【问题描述】：

在 jQuery 或 JavaScript（大多数跨浏览器兼容）中是否有通用方法来检查文本是否已突出显示？

我正在使用 HTML <input type='text'> 元素。这是一个搜索框，在搜索项目时允许使用特定格式。

用户可以输入以下内容：

项目名称、位置、描述和其他字母数字输入
项目编号（全数字）

在 keydown 我正在过滤各种搜索格式。按照目前的情况，如果输入了 10 个字符，并且它们都是数字，input 文本框将只允许输入更多非数字的字符。原因是，我们的项目编号是 10 位长，如果用户正在搜索项目编号，我们只想捕获前 10 个字符而忽略其余字符。

我的目标是允许用户按项目编号查找项目，突出显示他们刚刚输入的文本，然后按项目编号搜索另一个项目（替换现有的搜索文本）。但是，由于我们过滤的是非数字输入，因此不会捕获数字。

这是我过滤非数字的方式：

if ($input.val().length == 10 && !isNaN($input.val().replace(' ', '#'))) {
  if ((e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105)) {
    return false;
  }
}

如何修改它以确保如果我的文本被突出显示，input 将允许输入数字来替换现有查询？

【问题讨论】：

另见stackoverflow.com/q/9065828/1066234

标签： javascript jquery regex

【解决方案1】：

您可以使用Selection 对象：

var selection = window.getSelection();

在此处查看文档：https://developer.mozilla.org/en-US/docs/Web/API/Selection

通过这个对象，你可以检查选中的dom节点（anchorNode）。例如：

if ($(window.getSelection().anchorNode).attr('id') === 'something') { ... }

【讨论】：

谢谢！像魅力一样工作

【解决方案2】：

根据上面的回答，这里是原版的。

document.addEventListener('click', function(){
    if (window.getSelection().anchorNode.parentElement.classList.contains('word')) {
    console.log('highlight');
    }
});

我会将“document”更改为包装容器，将“word”更改为您想要检测突出显示的文本上的任何类/ID。

【讨论】：