2

I'd like to get a minimal CSS tree (not sure if that's correct term) for specific String of text.

By CSS tree I mean a set of selectors that will identify that particular text (or anything at the same level -- if there's a list of items with the same CSS then it's ok to get them all).

So for example let's say we have the following HTML:

<html>
  <body>
    <div id="someDivs">
      <div class="a-row">My text</div> 
      <div class="a-row">Your text</div>
    </div>
    <div id="someOtherDivs">
      <div class="main-div">Some other text</div>
    </div>
  </body>
</html>

If I specified the input as My text then the minimal css tree would be just .a-row (this will match more than one item, but that's ok).

However if the HTML looked like:

<html>
  <body>
    <div id="someDivs">
      <div class="a-row">My text</div> 
      <div class="a-row">Your text</div>
    </div>
    <div id="someOtherDivs">
      <div class="main-div">
        <div class="a-row">Some other text</div>
     </div>
    </div>
  </body>
</html>

Then the minimal CSS tree for the input My text would be #someDivs,.a-row

I think Javascript would be the easiest, but I'm pretty technology agnostic, if there's a better way to do this using backend tech (pref Java, but python etc are fine too) then that is not prob.

EDIT: The important thing is I'm trying to get the actual textual value of the selectors and not just get a variable (in JS) that can be used to select those items.

Ankur
  • 50,282
  • 110
  • 242
  • 312
  • 1
    If you are open to using jQuery, you can leverage [the :contains() selector](https://api.jquery.com/contains-selector/). – Jorge Valle Sep 07 '17 at 01:57
  • Yep Query is ok, I'll start playing around with that, seems the only option available so far :) – Ankur Sep 07 '17 at 02:00
  • As @JorgeValle pointed out this is possible with jQuery `$(".a-row:contains('My text')").addClass( "foo bar" );` and then you can style `.foo` and `.bar` normally in your CSS sheet. here's basic JsFiddle https://jsfiddle.net/1s742L1c/ – I haz kode Sep 07 '17 at 02:03
  • @Ihazkode the key thing is I don't want to style the CSS, I want to get the actual values of the selectors as text so I can store for future use. Also `.a-row:contains` because I don't know what the HTML/css is ahead of time, only the text that's on the page. – Ankur Sep 07 '17 at 02:11
  • 1
    Aha, now I see what you mean. This might be of help https://stackoverflow.com/a/11232541/8157693 – I haz kode Sep 07 '17 at 02:19
  • 1
    Oh great, thanks for this @Ihazkode. Now just need to traverse and get parents and check for 'minimality', back to work :) thx again – Ankur Sep 07 '17 at 02:24
  • If it's useful for anyone else in the future, I'm also playing with JSoup which has a :contains selector and .parent() method that looks they could be useful - if doing it on the server. – Ankur Sep 07 '17 at 02:26
  • No worries, glad you got it sorted. – I haz kode Sep 07 '17 at 02:38
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153827/discussion-between-ankur-and-i-haz-kode). – Ankur Sep 07 '17 at 03:45

0 Answers0