0

I have built a website that displays one table record at a time. I have been using a URL fragment identifier (everything after the first #) to supply the record identifier, so to display the record with identifier '1', the URL would be: baseurl.org/record.html#1

In the code, I simply take window.location.hash, strip the leading #, and then query the table for the appropriate record identifier.

I recently found that certain URL shorteners will append things to the end of the URL, so some social media links to my site had '?platform=hootsuite' added to the end. Of course, my javascript can't find a record with the identifier '1?platform=hootsuite'

It's easy enough to write a short piece of javascript to extract the substring before a question mark, since I do not expect a question mark in my identifiers. The identifiers sometimes include letters as well, like 22a or 223C, but never special characters like ?, /, &, or #. I am wondering what other unexpected strings could be appended to my URL. I guess that anything appended would have to be preceded by a special character like a question mark, so I could come up with a list of special characters and ignore anything after those.

Is there a correct or conventional way to use the URL fragment and to handle things being appended to it? Are there other issues that might arise related to this simple way of using the URL fragment?

I'm just using html, javascript, and jQuery, and am not interested in a whole separate framework or library to handle this.

cmrRose
  • 133
  • 7
  • Should only have to worry about `?` and parse your hash between `#` and `?`. – charlietfl Dec 08 '17 at 19:10
  • Everything after the ? is called the 'query string', and it's a conventional part of HTTP. Once you split off the query string, you should be able to take the end of the URL and use that. Here's a potentially helpful answer, though I'm sure there are others: https://stackoverflow.com/questions/6560618/break-a-url-into-its-components – pcurry Dec 08 '17 at 19:12
  • @pcurry OP simply wants to get rid of the query string if it is added to their hash. Any params are being added by third party and aren't relevant to OP's app – charlietfl Dec 08 '17 at 19:17
  • Thanks @pcurry. That is useful because I am also learning the proper vocabulary. As I search for solutions, I'm increasingly buried in terms to try to understand: fragment identifier, hash, HTML anchor, query string, dynamic URL, semantic URL, deep linking, URL vs URI, routing, etc. – cmrRose Dec 08 '17 at 20:03
  • @cmrRose naming things is hard, which is why we keep trying to do it, and arguably keep messing it up. You'll pick up the vocabulary over time with practice, and even people who've been doing this for ages end up confused by terms all the time. Good luck! – pcurry Dec 08 '17 at 20:12
  • Perhaps using a fragment identifier was not the best solution to begin with. It was just my first working solution as a beginner at this. I now see that using a fragment identifier also interferes with using html anchors to link somewhere down the page. What I need is a dynamic, semantic URL for each record in the table, so that a link could be shared to any individual record. Maybe I should be implementing this using other URL parameters instead, then routing or rewriting to make the URL semantic. But I don't know how to accomplish the routing/rewriting. – cmrRose Dec 08 '17 at 23:47

1 Answers1

1

Should only have to worry about ? and just parse your hash between # and first instance of ?

var hash = location.hash;
if(hash.length > 1){
  hash = hash.replace(/#|\?.+/g,'');// remove `#` and anything including and after `?`
  // do whatever with your hash records 
}

To be on the safe side I suggest you also send any mismatches to your server and store the url for analysis and future tweaks

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Thanks. I do know how parse the string between # and ?. What I don't know is: How do you know that I only have to worry about those characters? – cmrRose Dec 08 '17 at 21:14
  • Query strings always start with `?` which is part of the specs otherwise would cause all sorts of server side routing problems. Since hash always starts with `#` other uses in query params are typically uriEncoded. Not really familiar with protocols that url shorteners use but they can't butcher a url up to much or would break lots of server routing – charlietfl Dec 08 '17 at 21:23
  • I like your suggestion of logging all invalid entries so I can detect other issues that might be frustrating my users. That would be helpful. – cmrRose Dec 08 '17 at 21:32
  • Right. At least you know then if something's not matching and causing user headaches – charlietfl Dec 08 '17 at 21:39