Today I was thinking aloud about Tree Regular Expressions and how they might make a nice query language for document databases like CouchDB. Someone pointed out that CSS3 selectors might make a great concrete syntax for this. One thing lead to another and I thought, why not build a relational database in HTML? So I did. I even got inner joins working.

Let's start with a few tables:

    1
    amy
    bobamy

  ...



    1
    1
    http://www.example.com/foo.png

Now we can express some queries:

$('.users')
  .where('.id:eq(1)')
  .select('*')

This is equivalent to SELECT * FROM users WHERE id = 1

$('.users')
  .where('.id:eq(1)')
  .select('.id, .name')

This is equivalent to SELECT id, name FROM users WHERE id = 1. Here is something slightly more complicated:

$('.users')
  .where('.name:contains(a)')
    .and('.name:contains(c)')
  .select('*')

But here is the crowning glory, the inner join:

$('.users')
  .join('.photos')
  .where('.photos.user_id:eq(.users.id)')
    .and('.users.id:eq(1)')
  .select('.photos.url')

This is equivalent to:

SELECT photos.url FROM users, photos
WHERE photos.user_id = users.id
  AND users.id = 1

Download the fun at Github.