Created
June 1, 2021 18:01
-
-
Save elorz007/13faa517c35de23c0214ea28a36ccbd0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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