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?

Improve this question
5
  • highlighted text should have a class use that, show the code how is your html is highlighted Commented Aug 8, 2014 at 4: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: stackoverflow.com/questions/5379120/… If it's the latter, please clarify exactly what you're trying to target. Commented Aug 8, 2014 at 4:02
  • yes I mean the text a user selects on a page Commented Aug 8, 2014 at 4:09
  • 1
    Then the question I linked in my comment is what you're looking for - no need for jQuery here. Commented Aug 8, 2014 at 4:10
  • +1 for good question and added and how to hide highlighted text? as op needs this. Commented Aug 8, 2014 at 4:48

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

okay, how do I hide this selected text on a click of a button?
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?
Make a fiddle @Othuna. Sure i'll contribute
@Othuna Please set this answer as accepted answer that others can use this useful question and answer. Good Luck
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

Improve this answer

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.