Skip to content

Instantly share code, notes, and snippets.

@elorz007

elorz007/linkify.html

Created June 1, 2021 18:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elorz007/13faa517c35de23c0214ea28a36ccbd0 to your computer and use it in GitHub Desktop.
Save elorz007/13faa517c35de23c0214ea28a36ccbd0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
linkify.html
<!DOCTYPE html>
<html>
<head>
<title>Test links</title>
</head>
<body>
<section id="test-links">
<h1>1. a href file style 001</h1>
<a href="file://///host/folder/folder/file.ext">Link</a>
<h1>2. a href file style 002</h1>
<a href="file://host/folder/folder/file.ext">Link</a>
<h1>3. a href file style 003</h1>
<a href="file:\\host\folder\folder\file.ext">Link</a>
<h1>7. plain text style 001</h1>
<p>UNC /////host/folder/folder/file.ext in the middle</p>
<h1>8. plain text style 002</h1>
<p>UNC //host/folder/folder/file.ext in the middle</p>
<h1>9. plain text style 003</h1>
<p>UNC \\host\folder\folder\file.ext in the middle</p>
<h1>13. a href file and text style 001</h1>
<a href="file://///host/folder/folder/file.ext">file://///host/folder/folder/file.ext</a>
<h1>14. a href file and text style 002</h1>
<a href="file://host/folder/folder/file.ext">file://host/folder/folder/file.ext</a>
<h1>15. a href file and text style 003</h1>
<a href="file:\\host\folder\folder\file.ext">file:\\host\folder\folder\file.ext</a>
<h1>19. plain text style 001</h1>
<p>UNC file://///host/folder/folder/file.ext in the middle</p>
<h1>20. plain text file style 002</h1>
<p>UNC file://host/folder/folder/file.ext in the middle</p>
<h1>21. plain text file style 003</h1>
<p>UNC file:\\host\folder\folder\file.ext in the middle</p>
<hr>
Another link \\host\folder\folder\file.ext in the text of a node which has other non-text nodes too
<p>Where does the link end? (\\host\folder\folder\file.ext)<p>
<p>Where does the link end? (\\host\folder\folder\file.ext?query=true)<p>
<p>Where does the link end? (\\host\folder\folder\file.ext?query=true#)<p>
<p>Where does the link end? "\\host\folder\folder\file.ext?query=true#"<p>
<hr>
<span>
<br>User cases (text only)
<br>UC1. User case 1
File://\\webdav.example.de\DavWWWRoot\redacted\a-BC\AB-1\Urkundenüberprüfung\Urkundenüberprüfung+AB-123\SCHRIFTVERKEHR\Einleitung\Einleitungen_2021\Mai\AB+123.45+redacted,+redacted.doc
<br>UC2. User case 2
\\webdav.example.de\DavWWWRoot\redacted\AB\a-123-4\Ressourcenplanung\Infos.txt
<br>UC3. User case 3 (apparently not a UNC link)
https://webdav.example.de/redacted/123-4-5/redacted/redacted/Trouble%20Ticket%20des%20AB.doc
<br>UC4. User case 4
File://///webdav.example.de/redacted/123-4-5/redacted/redacted/screenshot%20redacted%20redacted.odt
<span>
<hr>
<span>
<br>User cases (actual HTML)
<br>UC1. User case 1
<a href="File://webdav.example.de/DavWWWRoot/redacted/a-BC/AB-1/Urkundenüberprüfung/Urkundenüberprüfung+AB-123/SCHRIFTVERKEHR/Einleitung/Einleitungen_2021/Mai/AB+123.45+redacted,+redacted.doc">File://\\webdav.example.de\DavWWWRoot\redacted\a-BC\AB-1\Urkundenüberprüfung\Urkundenüberprüfung+AB-123\SCHRIFTVERKEHR\Einleitung\Einleitungen_2021\Mai\AB+123.45+redacted,+redacted.doc</a>
<br>UC2. User case 2
<a href="file://webdav.example.de/DavWWWRoot/redacted/AB/a-123-4/Ressourcenplanung/Infos.txt">\\webdav.example.de\DavWWWRoot\redacted\AB\a-123-4\Ressourcenplanung\Infos.txt</a>
<br>UC3. User case 3 (apparently not a UNC link)
<a href="https://webdav.example.de/redacted/123-4-5/redacted/redacted/Trouble%20Ticket%20des%20AB.doc">https://webdav.example.de/redacted/123-4-5/redacted/redacted/Trouble%20Ticket%20des%20AB.doc</a>
<br>UC4. User case 4
<a href="File://webdav.example.de/redacted/123-4-5/redacted/redacted/screenshot%20redacted%20redacted.odt">File://///webdav.example.de/redacted/123-4-5/redacted/redacted/screenshot%20redacted%20redacted.odt</a>
<span>
</section>
<style type="text/css">
code {
display: block;
margin-bottom: 1.5em;
margin-top: 1.5em;
border-radius: 0.4em;
padding: 1em;
background-color: #f6f6f6;
}
#test-links {
padding: 1em;
}
#test-links h1 {
margin-top: 2em;
}
#test-links a,
#test-links button {
font-size: 1.5em;
}
</style>
<script type="text/javascript">
function forEachTextNode(root, ignore, action) {
const walker = document.createTreeWalker(
root,
NodeFilter.SHOW_ELEMENT, // Has to be SHOW_ELEMENT and not SHOW_TEXT because we need to iterate over the Element objects to be able to modify them, not their text content only
{ acceptNode: function(element) { return ignore(element) ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT; }}
)
// It is important to first use the walker to gather all the nodes and only then call the action because if the action would modify the nodes it can cause deadlocks in the walker
const nodes = [];
while (walker.nextNode()) {
nodes.push(walker.currentNode)
}
// We iterate through all elements but want to change only its text subnodes
for (const node of nodes) {
for (const child of node.childNodes) {
if (child.nodeType === Node.TEXT_NODE) {
action(child)
}
}
}
}
function modifyHTML(modification) {
// Node is documented in https://developer.mozilla.org/en-US/docs/Web/API/Node
return function(node) {
// In order to insert html into a text node, it's necessary to create a replacement node that will hold the html and will be inserted int the middle
var replacementNode = document.createElement('span');
node.parentNode.insertBefore(replacementNode, node);
node.parentNode.removeChild(node);
replacementNode.outerHTML = modification(node.textContent);
}
}
function ignoring(condition) {
// Element is documented in https://developer.mozilla.org/en-US/docs/Web/API/Element
return function(element) {
return condition(element.tagName)
}
}
forEachTextNode(
document.body,
ignoring(tag => tag === "STYLE" || tag === "SCRIPT" || tag === "A"),
modifyHTML(text => text.replace(/(file:)?([/\\]{2,}[^ <>)"']+)/ig, '<a href="$1$2">$1$2</a>'))
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment