2

I want to know how to select Highlighted text using JQuery selector. For example, to select elements with a class, you use .class, for IDs, you use #id.

What do I use for highlighted text so that I can (for example) hide them:

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

What is the highlighted text selector, and how to hide highlighted text?

Manwal
  • 23,450
  • 12
  • 63
  • 93
Othuna
  • 129
  • 1
  • 12
  • highlighted text should have a class use that, show the code how is your html is highlighted – Bhojendra Rauniyar Aug 08 '14 at 04:00
  • 1
    By "highlighted text," do you mean the text the user has selected on the page or something else? If it's the former, see this question: http://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text If it's the latter, please clarify exactly what you're trying to target. – Sean Walsh Aug 08 '14 at 04:02
  • yes I mean the text a user selects on a page – Othuna Aug 08 '14 at 04:09
  • 1
    Then the question I linked in my comment is what you're looking for - no need for jQuery here. – Sean Walsh Aug 08 '14 at 04:10
  • +1 for good question and added `and how to hide highlighted text?` as op needs this. – Manwal Aug 08 '14 at 04:48

2 Answers2

3

This is one your are looking for i believe:

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

DEMO

Hide selected/highlighted text javascript

You have to get parent of Element from DOM:

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

Update

Fixed demo to hide text we have to find 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

Manwal
  • 23,450
  • 12
  • 63
  • 93
  • okay, how do I hide this selected text on a click of a button? – Othuna Aug 08 '14 at 04:20
  • oops one notice! this works but it hides the first instance of the text similar to the highlighted text. for example, if I have a text: "four months and four days" and I highlighted the "four" before "days", and clicked "hide", the "four" before "monthss" will be hidden not the "four" before "days". can you please fix this? – Othuna Aug 08 '14 at 05:57
  • Make a fiddle @Othuna. Sure i'll contribute – Manwal Aug 08 '14 at 06:33
  • 1
    @Othuna Please set this answer as accepted answer that others can use this useful question and answer. Good Luck – Mohammad Ali Oct 31 '18 at 21:36
0
 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();
  }

The above code check the highlighted text from the div and if it found it set that text in p tag with id and using that id you can hide it

user3459464
  • 224
  • 1
  • 3
  • You provide code, but you don't provide an explanation as to why this works. Please add an explanation to aid the OP and future readers. – Rapptz Aug 08 '14 at 04:58