Using JavaScript/jQuery to return a list of CSS selectors based on highlighted text
- by Bungle
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!
