Create hyperlinks for URLs (#339)

* Create anchor (link) tags around strings that look like a URL

* Handle anchor (link) tags when copying/exporting table content

* Allow for exporting hyperlinks to CSV

* Revert "Allow for exporting hyperlinks to CSV"

This reverts commit 9ead72c.

* Check URL for validity

* Relax URL-matching regex

As suggested by @qu1ck, use

https://gitlab.com/kicad/code/kicad/-/blob/2f8cc845513b918e219f32733a210bf458138f91/kicad/pcm/schemas/pcm.v1.schema.json#L287

as a reference, but fix these issues:

* remove the single period (any char) in the http(s) part to allow
single-character host names, such as http://a (valid, brings up the
default page of the webserver on host 'a')

* add missing parenthesis (group) around everything between ^ and $ for
the alternative (|) to work as expected (the original regex will match
file:// in the middle of the string, as the regex matches anything that
*either* *begins* with http(s):// *or* *ends* with a file://... URL
scheme)

* Move URL-matching regex definition to top of populateBomBody()

* Iterate directly over valueSet

* Use backtick string notation

Author: markh-de

InteractiveHtmlBom/web/ibom.js

@@ -552,6 +552,7 @@ function populateBomHeader(placeHolderColumn = null, placeHolderElements = null)
 }
 
 function populateBomBody(placeholderColumn = null, placeHolderElements = null) {
+  const urlRegex = /^(https?:\/\/[^\s\/$.?#][^\s]*|file:\/\/([a-zA-Z]:|\/)[^\x00]+)$/;
   while (bom.firstChild) {
     bom.removeChild(bom.firstChild);
   }
@@ -659,7 +660,16 @@ function populateBomBody(placeholderColumn = null, placeHolderElements = null) {
           var valueSet = new Set();
           references.map(r => r[1]).forEach((id) => valueSet.add(pcbdata.bom.fields[id][field_index]));
           td = document.createElement("TD");
-          td.innerHTML = highlightFilter(Array.from(valueSet).join(", "));
+          var output = new Array();
+          for (let item of valueSet) {
+            const visible = highlightFilter(item);
+            if (item.match(urlRegex)) {
+              output.push(`<a href="${item}" target="_blank">${visible}</a>`);
+            } else {
+              output.push(visible);
+            }
+          }
+          td.innerHTML = output.join(", ");
           tr.appendChild(td);
         }
       });

InteractiveHtmlBom/web/util.js

@@ -85,7 +85,7 @@ function saveBomTable(output) {
           if (node.checked) {
             val += '✓';
           }
-        } else if (node.nodeName == "MARK") {
+        } else if ((node.nodeName == "MARK") || (node.nodeName == "A")) {
           val += node.firstChild.nodeValue;
         } else {
           val += node.nodeValue;