【问题标题】：JQuery selector for highlighted text突出显示文本的 JQuery 选择器
【发布时间】：2014-08-08 15:46:40
【问题描述】：

我想知道如何使用 JQuery 选择器选择突出显示的文本。例如，要选择具有类的元素，使用.class，对于ID，使用#id。

我应该为突出显示的文本使用什么，以便我可以（例如）隐藏它们：

$("Highlighted text").hide();

什么是高亮文本选择器，如何隐藏高亮文本？

【问题讨论】：

突出显示的文本应该有一个类使用，显示代码如何突出显示您的 html
“突出显示的文本”是指用户在页面上选择的文本还是其他内容？如果是前者，请参阅此问题：stackoverflow.com/questions/5379120/… 如果是后者，请明确说明您要针对的目标。
是的，我的意思是用户在页面上选择的文本
那么我在评论中链接的问题就是您正在寻找的 - 这里不需要 jQuery。
+1 表示好问题，并在操作需要时添加了and how to hide highlighted text?。

标签： javascript jquery html css

【解决方案1】：

我相信这是您正在寻找的：

text = window.getSelection().toString();

DEMO

隐藏选定/突出显示的文本 javascript

你必须从 DOM 中获取 Element 的父级：

function getSelectionParentElement() {
    var parentEl = null, sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            parentEl = sel.getRangeAt(0).commonAncestorContainer;
            if (parentEl.nodeType != 1) {
                parentEl = parentEl.parentNode;
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        parentEl = sel.createRange().parentElement();
    }
    return parentEl;
}

NEW DEMO

更新

修复了隐藏文本的问题，我们必须找到startOffset

function getStartOffset() {
    var sel = document.selection, range, rect;
    var x = 0, y = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            range.collapse(true);
        }
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getClientRects) {
                range.collapse(true);
            }
        }
    }
    return range.startOffset;
}

Updated DEMO

【讨论】：

好的，如何在单击按钮时隐藏此选定文本？
哎呀一个通知！这有效，但它隐藏了类似于突出显示的文本的文本的第一个实例。例如，如果我有一个文本：“四个月零四天”，并且我突出显示“天”之前的“四”，然后单击“隐藏”，则“月”之前的“四”将被隐藏而不是“四”在“天”之前。你能解决这个问题吗？
制作小提琴@Othuna。当然我会贡献
@Othuna 请将此答案设置为已接受的答案，其他人可以使用此有用的问题和答案。祝你好运

【解决方案2】：

 if($("idDiv").html().contains('Highlighted text')==true)
 {
   var a=$("#idDiv").html();
   a=a.replace("Highlighted text","<p id='highlightedtext'>Highlighted text</p>");
   $("#idDiv").html(a);
   $("#highlightedtext").hide();
  }

上面的代码检查 div 中突出显示的文本，如果发现它在 p 标签中设置了带有 id 的文本，并且使用该 id 可以隐藏它

【讨论】：

您提供了代码，但没有解释为什么会这样。请添加解释以帮助 OP 和未来的读者。