ARROW-15819: [R] R docs version switcher doesn't work on Safari on MacOS

Updates the code used in the version switcher to be compatible with Safari, and adds extra docs to the version switcher.

Recommendations for reviewing this PR:
* You could try building the pkgdown site locally, but the problem there is that the code for constructing the URLs for the dropdown doesn't actually work when loading the page from a file like that
* What I do is navigate to a deployed page (I used https://arrow.apache.org/docs/3.0/r/ as there is no version dropdown on that version of the docs) and then open us the JS console in my browser and copy and paste the contents of extra.js into there - you'll then see the dropdown appear and can check the links point to the correct places
* The thing we want to check for on this PR is that the dropdown is generated in Safari on MacOS - it wasn't before due to an incompatible regex

Closes apache#12819 from thisisnic/ARROW-15819_version_safari

Authored-by: Nic Crane <thisisnic@gmail.com>
Signed-off-by: Nic Crane <thisisnic@gmail.com>

r/pkgdown/extra.js

@@ -17,6 +17,12 @@
 
 function check_page_exists_and_redirect(event) {
 
+    /**
+       * When a user uses the version dropdown in the docs, check if the page
+       * they are currently browsing exists in that version of the docs.
+       * If yes, take them there; if no, take them to the main docs page.
+       */
+
     const path_to_try = event.target.value;
 
     const base_path = path_to_try.match("(.*\/r\/)?")[0];
@@ -95,32 +101,48 @@ $(window).bind("pageshow", function(event) {
        * dropdown where you can select the version of the docs to view.
        */
 
+         // Get the start of the path which includes the version number or "dev"
+         // where applicable and add the "/docs/" suffix
         $pathStart = function(){
     	  return window.location.origin + "/docs/";
         }
 
+
+        // Get the end of the path after the version number or "dev" if present
         $pathEnd  = function(){
       	  var current_path = window.location.pathname;
-      	  return current_path.match("(?<=\/r).*");
+      	  // Can't do this via a positive look-behind or we lose Safari compatibility
+      	  return current_path.match("\/r.*")[0].substr(2);
         }
 
+        // Load JSON file mapping between docs version and R package version
         $.getJSON("https://arrow.apache.org/docs/r/versions.json", function( data ) {
           // get the current page's version number:
-		  var displayed_version = $('.version').text();
+    		  var displayed_version = $('.version').text();
+    		  // Create a dropdown selector and add the appropriate attributes
           const sel = document.createElement("select");
           sel.name = "version-selector";
           sel.id = "version-selector";
           sel.classList.add("navbar-default");
+          // When the selected value is changed, take the user to the version
+          // of the page they are browsing in the selected version
           sel.onchange = check_page_exists_and_redirect;
 
-		  $.each( data, function( key, val ) {
+          // For each of the items in the JSON object (name/version pairs)
+    		  $.each( data, function( key, val ) {
+    		    // Add a new option to the dropdown selector
             const opt = document.createElement("option");
+            // Set the path based on the 'version' field
             opt.value = $pathStart() + val.version + "r" + $pathEnd();
+            // Set the currently selected item based on the major and minor version numbers
             opt.selected = val.name.match("[0-9.]*")[0] === displayed_version;
+            // Set the displayed text based on the 'name' field
             opt.text = val.name;
+            // Add to the selector
             sel.append(opt);
-		  });
+  		    });
 
+          // Replace the HTML "version" component with the new selector
           $("span.version").replaceWith(sel);
         });
     });