In Tritium, how can I insert elements based on content of existing elements?

Question

I want to insert new elements, but it has to be between specific elements. The only way to distinguish these elements is by their content.

I want to insert header elements that will split up this list alphabetically. How can I do this?

<p>Aardvark</p>
<p>Alligator</p>
<p>Bear</p>
<p>Beaver</p>
<p>Cat</p>
<p>Cow</p>
...

Answer 1

Alright, let's get some serious code right done right now.

I'm going to try to make this dynamic!

$letter = ''
$("//p[not(contains(@class,'starts-with'))][1]") {
  # get the first p that doesn't have the class
  $add_header = "false"
  text() {
    capture(/\A(\w)/) {
      # get the first letter and set it to a variable 
      match($letter) {
        with($1) {
          #do nothing
        }
        else() {
          $letter = $1
          $add_header = "true"
        }
      }
    }
  }
  match($add_header) {
    with(/true/) {
      insert_before("h1", "Starts With: "+$letter)
      $("self::*|following-sibling::p[contains(text(), '"+$letter+"')]") {
        add_class("starts-with-" + $letter)
      }
    }
  }
}