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

Posted by Bungle on Stack Overflow See other posts from Stack Overflow or by Bungle
Published on 2010-03-04T23:17:41Z Indexed on 2010/03/19 18:41 UTC
Read the original article Hit count: 746

Filed under:
|
|
|
|

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!

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery