-
Notifications
You must be signed in to change notification settings - Fork 0
/
linkifier.html
127 lines (102 loc) · 3.54 KB
/
linkifier.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<title>Simple linkifier</title>
<style>
.row {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="row">
<label for="url">URL:</label>
<input id="url" type="text" size="60">
<button type="button" onclick=clearurl()>Clear</button>
</div>
<br>
<div class="row">
<label for="text">Text:</label>
<input id="text" type="text" size="60">
<button type="button" onclick=cleartext()>Clear</button>
</div>
<br>
<button type="button" onclick=makelink()>Make link</button><br><br>
<div class="row">
<label for="link">Link:</label>
<input id="link" type="text" size="60" readonly>
<button type="button" onclick=clearlink()>Clear</button>
</div>
<br>
<button type="button" onclick=testlink()>Test</button>
<button type="button" onclick=copy()>Copy to clipboard</button>
<br><br>
<p>If URL does not start <b>http</b> it will add <b>https://</b></p>
<div id="fragmentDirectiveText">
<p><span style="color:red">The URL contains a fragment directive. Probably it includes text to highlight.</span><br>
Due to browser security policies this cannot be tested using the Test button - it requires a user click.<br>
To test it, open the link below in a new tab.</p>
<p id="fragmentDirectiveLink"></p>
<p>Note that not all browsers will scroll to or highlight the text.</p>
</div>
<br>
<p><small>v1.1.0 10.01.2024</small></p>
</body>
</html>
<script>
const fragmentDirective = new RegExp('#.*:~:') ;
document.getElementById('fragmentDirectiveText').style.visibility = "hidden" ;
function clearurl() {
document.getElementById('url').value = "" ;
document.getElementById('link').value = "" ;
document.getElementById('fragmentDirectiveText').style.visibility = "hidden" ;
}
function cleartext() {
document.getElementById('text').value = "" ;
document.getElementById('link').value = "" ;
}
function clearlink() {
document.getElementById('link').value = "" ;
document.getElementById('fragmentDirectiveText').style.visibility = "hidden" ;
}
function makelink() {
linktext = document.getElementById('text').value ;
if (linktext == "") {
linktext = document.getElementById('url').value ;
}
href = document.getElementById('url').value ;
if (href.substring(0,4) != "http") {
href = "https://" + href ;
}
linkHTML = '<a href="' + href + '">' + linktext + '</a>' ;
document.getElementById('link').value = linkHTML ;
if (fragmentDirective.test(href)) {
document.getElementById('fragmentDirectiveLink').textContent = '' ;
document.getElementById('fragmentDirectiveLink').insertAdjacentHTML("afterbegin", linkHTML)
document.getElementById('fragmentDirectiveText').style.visibility = "visible" ;
} else {
document.getElementById('fragmentDirectiveText').style.visibility = "hidden" ;
}
}
function testlink() {
if (document.getElementById('link').value != "") {
if (!fragmentDirective.test(href)) {
try {
window.open(href) ;
} catch (error) {
alert("Error: the URL entered is invalid.\nProbably it includes illegal characters.")
}
}
}
}
function copy() {
if (document.getElementById('link').value != "") {
navigator.clipboard.writeText(document.getElementById('link').value).then(function() {
/* clipboard successfully set */
}, function() {
/* clipboard write failed */
console.log("Clipboard write failed: " + href ) ;
});
}
}
</script>