Escape HTML characters in the indicator search variable tooltip. (#1527)

<!--Please ensure the PR fulfills the following requirements! -->
<!-- If this is your first PR, make sure to add your details to the
AUTHORS.rst! -->
### Pull Request Checklist:
- [x] This PR addresses an already opened issue (for bug fixes /
features)
    - This PR fixes #1524
- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] (If applicable) Documentation has been added / updated (for bug
fixes / features)
- [ ] CHANGES.rst has been updated (with summary of main changes)
- [ ] Link to issue (:issue:`number`) and pull request (:pull:`number`)
has been added

### What kind of change does this PR introduce?

* Adds a JS function to escape HTML characters.

### Does this PR introduce a breaking change?


### Other information:

CHANGES.rst

@@ -19,6 +19,7 @@ New features and enhancements
 Bug fixes
 ^^^^^^^^^
 * Fixed a bug with ``n_escore=-1`` in ``xclim.sdba.adjustment.NpdfTransform`` (:issue:`1515`, :pull:`1515`).
+* In the documentaion, fix the tooltips in the indicator search results (:issue:`1524`, :pull:`1527`).
 
 Internal changes
 ^^^^^^^^^^^^^^^^

docs/_static/indsearch.js

@@ -30,15 +30,18 @@ fetch('indicators.json')
   });
 
 
-// Populate list of variables
-//function getVariables() {
-//    fetch('variables.json')
-//        .then((res) => {
-//            return res.json();
-//        })
-//}
-//const variables = getVariables();
-
+function escapeHTML(str){
+    /* Escape HTML characters in a string. */
+    var map =
+    {
+        '&': '&',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    };
+    return str.replace(/[&<>"']/g, function(m) {return map[m];});
+}
 
 function makeKeywordLabel(ind) {
     /* Print list of keywords only if there is at least one. */
@@ -55,7 +58,10 @@ function makeKeywordLabel(ind) {
 function makeVariableList(ind) {
     /* Print list of variables and include mouse-hover tooltip with variable description. */
     return Object.entries(ind.vars).map((kv) => {
-        const tooltip = `<button class="indVarname" title="${kv[1]}" alt="${kv[1]}">${kv[0]}</button>`;
+        /* kv[0] is the variable name, kv[1] is the variable description. */
+        /* Convert kv[1] to a string literal */
+        const text = escapeHTML(kv[1]);
+        const tooltip = `<button class="indVarname" title="${text}" alt="${text}">${kv[0]}</button>`;
         return tooltip
     }).join('');
 }
@@ -66,13 +72,13 @@ function indTemplate(ind) {
   return `
     <div class="indElem" id="${ind.id}">
       <div class="indHeader">
-        <b class="indTitle">${ind.title}</b>
+        <b class="indTitle">${escapeHTML(ind.title)}</b>
         <a class="reference_internal indName" href="api_indicators.html#xclim.indicators.${ind.module}.${ind.name}" title="${ind.name}">
           <code>${ind.module}.${ind.name}</code>
         </a>
       </div>
       <div class="indVars">Uses: ${varlist}</div>
-      <div class="indDesc"><p>${ind.abstract}</p></div>
+      <div class="indDesc"><p>${escapeHTML(ind.abstract)}</p></div>
       ${makeKeywordLabel(ind)}
       <div class="indID">Yaml ID: <code>${ind.id}</code></div>
     </div>