I'm not exactly sure how what you are doing isn't working... The UrlField control should output the URL title and wrap it in an <a> tag. You can then use jQuery to pull it apart and do what you like. If it doesn't have an ID that you can use (although you should be able to set that), just wrap the URL field in a <div> with the ID you want.
Edit after comment:
You need to be focussing on the page layout not the master page. Skip to the last paragraph if you already know the following...
To display the values of fields you must have a list item. In the case of a publishing site, these items exist in a Pages list. You may have browsed to this list (site/Pages/Forms/AllItems.aspx) and seen that it is just a standard SharePoint list allowing you to choose View Properties on any item and see the values of all the fields.
How this works from an end-user perspective is that all of these list items have an associated page layout (this is actually a field in the Pages list). The page layout contains controls such as UrlField to display and edit all of the fields for a page. So a page associated with a page layout and rendered in the browser is just another way of going to the Pages list and choosing View Properties on a list item.
When it comes to master pages - they don't know what to do with field controls. They simply provide the chrome while the page layout provides something more akin to a page template containing fields. There is no relationship between a list item and a master page. The relationship exists between a list item and a page layout. Whatever you'd like to do with the UrlField needs to be done in the page layout.