Parsing URLs

In a realistic web app, we want to show different content for different URLs:

  • /search
  • /search?q=seiza
  • /settings

How do we do that? We use the elm/url to parse the raw strings into nice Elm data structures. This package makes the most sense when you just look at examples, so that is what we will do!

Example 1

Say we have an art website where the following addresses should be valid:

  • /topic/architecture
  • /topic/painting
  • /topic/sculpture
  • /blog/42
  • /blog/123
  • /blog/451
  • /user/tom
  • /user/sue
  • /user/sue/comment/11
  • /user/sue/comment/51

So we have topic pages, blog posts, user information, and a way to look up individual user comments. We would use the Url.Parser module to write a URL parser like this:

  1. import Url.Parser exposing (Parser, (</>), int, map, oneOf, s, string)
  3. type Route
  4.   = Topic String
  5.   | Blog Int
  6.   | User String
  7.   | Comment String Int
  9. routeParser : Parser (Route -> a) a
  10. routeParser =
  11.   oneOf
  12.     [ map Topic   (s "topic" </> string)
  13.     , map Blog    (s "blog" </> int)
  14.     , map User    (s "user" </> string)
  15.     , map Comment (s "user" </> string </> s "comment" </> int)
  16.     ]
  18. -- /topic/pottery        ==>  Just (Topic "pottery")
  19. -- /topic/collage        ==>  Just (Topic "collage")
  20. -- /topic/               ==>  Nothing
  22. -- /blog/42              ==>  Just (Blog 42)
  23. -- /blog/123             ==>  Just (Blog 123)
  24. -- /blog/mosaic          ==>  Nothing
  26. -- /user/tom/            ==>  Just (User "tom")
  27. -- /user/sue/            ==>  Just (User "sue")
  28. -- /user/bob/comment/42  ==>  Just (Comment "bob" 42)
  29. -- /user/sam/comment/35  ==>  Just (Comment "sam" 35)
  30. -- /user/sam/comment/    ==>  Nothing
  31. -- /user/                ==>  Nothing

The Url.Parser module makes it quite concise to fully turn valid URLs into nice Elm data!

Example 2

Now say we have a personal blog where addresses like this are valid:

  • /blog/12/the-history-of-chairs
  • /blog/13/the-endless-september
  • /blog/14/whale-facts
  • /blog/
  • /blog?q=whales
  • /blog?q=seiza

In this case we have individual blog posts and a blog overview with an optional query parameter. We need to add the Url.Parser.Query module to write our URL parser this time:

  1. import Url.Parser exposing (Parser, (</>), (<?>), int, map, oneOf, s, string)
  2. import Url.Parser.Query as Query
  4. type Route
  5.   = BlogPost Int String
  6.   | BlogQuery (Maybe String)
  8. routeParser : Parser (Route -> a) a
  9. routeParser =
  10.   oneOf
  11.     [ map BlogPost  (s "blog" </> int </> string)
  12.     , map BlogQuery (s "blog" <?> Query.string "q")
  13.     ]
  15. -- /blog/14/whale-facts  ==>  Just (BlogPost 14 "whale-facts")
  16. -- /blog/14              ==>  Nothing
  17. -- /blog/whale-facts     ==>  Nothing
  18. -- /blog/                ==>  Just (BlogQuery Nothing)
  19. -- /blog                 ==>  Just (BlogQuery Nothing)
  20. -- /blog?q=chabudai      ==>  Just (BlogQuery (Just "chabudai"))
  21. -- /blog/?q=whales       ==>  Just (BlogQuery (Just "whales"))
  22. -- /blog/?query=whales   ==>  Just (BlogQuery Nothing)

The </> and <?> operators let us write parsers that look quite like the actual URLs we want to parse. And adding Url.Parser.Query allowed us to handle query parameters like ?q=seiza.

Example 3

Okay, now we have a documentation website with addresses like this:

  • /Basics
  • /Maybe
  • /List
  • /List#map
  • /List#filter
  • /List#foldl

We can use the fragment parser from Url.Parser to handle these addresses like this:

  1. type alias Docs =
  2.   (String, Maybe String)
  4. docsParser : Parser (Docs -> a) a
  5. docsParser =
  6.   map Tuple.pair (string </> fragment identity)
  8. -- /Basics     ==>  Just ("Basics", Nothing)
  9. -- /Maybe      ==>  Just ("Maybe", Nothing)
  10. -- /List       ==>  Just ("List", Nothing)
  11. -- /List#map   ==>  Just ("List", Just "map")
  12. -- /List#      ==>  Just ("List", Just "")
  13. -- /List/map   ==>  Nothing
  14. -- /           ==>  Nothing

So now we can handle URL fragments as well!

Synthesis

Now that we have seen a few parsers, we should look at how this fits into a Browser.application program. Rather than just saving the current URL like last time, can we parse it into useful data and show that instead?

  1. TODO

The major new things are:

  1. Our update parses the URL when it gets a UrlChanged message.
  2. Our view function shows different content for different addresses!

It is really not too fancy. Nice!

But what happens when you have 10 or 20 or 100 different pages? Does it all go in this one view function? Surely it cannot be all in one file. How many files should it be in? What should be the directory structure? That is what we will discuss next!