diff --git a/assets/document-branches.js b/assets/document-branches.js
index 9e82d2a3..7edf0fda 100644
--- a/assets/document-branches.js
+++ b/assets/document-branches.js
@@ -1,19 +1,14 @@
 window.addEventListener("load", function() {
     let select = document.querySelector("header .documentBranch select");
-    while (select.firstChild) {
-        select.removeChild(select.firstChild);
+    while (select.length > 0) {
+        select.remove(0);
     }
     for (let branch of documentBranches) {
-        let option = document.createElement("option");
-        option.textContent = branch;
-        if (branch === documentBranch) {
-            option.setAttribute("selected", "");
-        }
-        select.prepend(option);
+        select.add(new Option(branch, branch, branch === documentBranch, branch === documentBranch), 0);
     }
     select.addEventListener("change", function() {
         if (select.value !== documentBranch) {
-            location.assign(select.value + ".html");
+            location.assign(encodeURIComponent(select.value + ".html"));
             select.value = documentBranch;
         }
     });
diff --git a/documentation-generator/run.py b/documentation-generator/run.py
index 5bebe7bf..4b095da1 100755
--- a/documentation-generator/run.py
+++ b/documentation-generator/run.py
@@ -9,6 +9,7 @@ Gracefully handles conflicting commits.
 
 import contextlib
 import glob
+import html
 import json
 import os
 import re
@@ -38,8 +39,22 @@ PANDOC_DOWNLOAD = ("https://github.com/jgm/pandoc/releases/download/"
 PANDOC_SHA256 = ("2001d93463c003f8fee6c36b1bfeccd5"
                  "51ab6e35370b24f74f457e3f6dffb8b7")
 BRANCH_ORDERING = [  # Format: (REGEX, ORDER, DEFAULT)
-    (r'v?\d+(?:\.\d+)*(?:\.x)*', 0, True),
-    (r'.*', 1, False)]
+    (r"v?\d+(?:\.\d+)*(?:\.x)*", 0, True),
+    (r".*", 1, False)]
+
+
+def escape_js(s):
+    return s.translate(str.maketrans({
+        "\t": "\\t",
+        "\v": "\\v",
+        "\0": "\\0",
+        "\b": "\\b",
+        "\f": "\\f",
+        "\n": "\\n",
+        "\r": "\\r",
+        "\'": "\\'",
+        "\"": "\\\"",
+        "\\": "\\\\"}))
 
 
 def convert_doc(src_path, to_path, branch, branches):
@@ -56,8 +71,9 @@ def convert_doc(src_path, to_path, branch, branches):
         "--shift-heading-level-by=%d" % SHIFT_HEADING,
         "--toc-depth=%d" % (TOC_DEPTH+SHIFT_HEADING),
         "--filter=%s" % os.path.abspath(FILTER_EXE),
-        "--variable=branch=%s" % branch,
-        *("--variable=branches=%s" % b for b in branches)],
+        "--variable=branch_html=%s" % html.escape(branch),
+        "--variable=branch_js=%s" % escape_js(branch),
+        *("--variable=branches_js=%s" % escape_js(b) for b in branches)],
         cwd=os.path.dirname(TEMPLATE_PATH),
         stdout=subprocess.PIPE, check=True).stdout
     raw_html = subprocess.run([POSTPROCESSOR_EXE], input=raw_html,
@@ -167,7 +183,7 @@ def main():
                 raise RuntimeError("no default branch")
             target = default_branch
         source_path = "%s.html" % str(source)
-        target_url = urllib.parse.quote("%s.html" % str(target))
+        target_url = urllib.parse.quote_plus("%s.html" % str(target))
         with open(source_path, "w") as f:
             f.write(redirect_template.format(target=target_url))
         run_git("add", "--", source_path)
diff --git a/documentation-generator/template.html b/documentation-generator/template.html
index 54ba9e22..0ecf91cc 100644
--- a/documentation-generator/template.html
+++ b/documentation-generator/template.html
@@ -15,15 +15,15 @@ $endif$
 <noscript><link href="assets/screen-noscript.css" media="screen" rel="stylesheet"></noscript>
 <link href="https://github.com/Kozea/Radicale/releases.atom" type="application/atom+xml" rel="alternate" title="Radicale Releases">
 <link href="assets/icon.png" type="image/png" rel="icon">
-<title>Radicale "$branch$" Documentation</title>
+<title>Radicale "$branch_html$" Documentation</title>
 <meta name="description" content="Free and Open-Source CalDAV and CardDAV Server">
 <script src="assets/navigation.js"></script>
 <script src="assets/document-branches.js"></script>
 <script src="assets/narrow-menu.js"></script>
 <script src="assets/navigation-scroll-fix.js"></script>
 <script>
-    const documentBranch = "$branch$";
-    const documentBranches = ["$for(branches)$$branches$$sep$", "$endfor$"];
+    const documentBranch = "$branch_js$";
+    const documentBranches = ["$branches_js[", "]$"];
 </script>
 
 <header>
@@ -31,7 +31,7 @@ $endif$
         <h1>
             Radicale
             <span class="documentBranch">
-                <span>$branch$</span>
+                <span>$branch_html$</span>
                 <select></select>
             </span>
         </h1>
@@ -59,6 +59,6 @@ $endif$
         </div>
     </nav>
     <div class="documentContainer">
-$body$
+        $body$
     </div>
 </main>