Using JavaScript/jQuery to return a list of CSS selectors based on highlighted text

Question

I've been given some project requirements that involve (ideally) returning a list of CSS selectors based on highlighted text.

In other words, a user could do something like this on a page:

• Click a button to indicate that their next text selection should be recorded.
• Highlight some text on the page.
• See a generated list of CSS selectors that correspond to all the elements that contain the highlighted text.

Firstly, does this seem like a feasible goal? jQuery makes it easy to use a selector to access a particular element, but I'm not sure if the reverse holds true. If an element lacks an id attribute, I also don't know how you'd return an "optimized" selector - i.e., one that identifies an element uniquely. Maybe crawl up the DOM until you find an ID, then stem the selector from there?

Secondly, from a high-level perspective, any ideas on how to go about this? Any tips or tricks that could speed development? I very much appreciate any help.

Thanks!

Answer 1

I think you're looking for window.getSelection and window.getComputedStyle.

Answer 2

I think this is what you are looking for:

http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse

Hope this helps.