forked from alexcorvi/anchorme.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (188 loc) · 11.5 KB
/
index.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html>
<head>
<title>anchorme</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="src/anchorme.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Angular code for auto updating the test section -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script type="text/javascript">
/*global anchorme*/
/*global angular*/
var myApp = angular.module("myApp", []).controller('myCtrl', ["$scope", "$sce", myCtrl]);
function myCtrl($scope, $sce, myApp) {
$scope.input = "Examples:"+
"\nSimply a domain: www.google.com"+
"\nDomain with port: www.google.com:8000"+
"\nURL with query: www.google.com/?key=value"+
"\nDomain with international TLD: github.io"+
"\nEmail address: [email protected]"+
"\nIP address: 127.0.0.1:8000/somethinghere"+
"\nHTML elements won't break: <img src='http://dummyimage.com/50'>"+
"\nCapital case: FTP://GOOGLE.COM"+
"\nmixed case: https://www.youtube.com/watch?v=d7ez-gIt08I"+
"\nLinks with parenthesis: en.c.org/a_(b)"+
"\nLinks inside parenthesis: (www.google.com)"+
"\nLinks with paranethisis AND inside paranthesis: (en.c.org/a_(x)_(y))";
$scope.$watch("input", function(newValue, oldValue) {
$scope.linkedInput = anchorme.js($scope.input, {
TLDs: 901,
});
});
$scope.renderHtml = function(html_code) {
return $sce.trustAsHtml(html_code);
};
}
myCtrl.$inject = ['$scope'];
</script>
<style>
body{font-family: 'Raleway', sans-serif;background: #fafafa;}
h1,h2,h3,h4,h5,h6 {font-weight:bold;}
h1 {font-size:26px;}
h2 {font-size:22px;}
h3 {font-size:20px;}
#textarea {height:300px;max-height:300px;max-width:100%;font-family:monospace;}
#resultPlace{font-family:monospace;white-space:pre-wrap;line-height: 25px;}
.nav a {margin-right:15px;}
footer {margin: 50px 0;}
#resultPlace a {background: gold;color: #000;padding: 2px 12px;border-radius: 4px;}
</style>
</head>
<body class="container">
<header>
<h1>Anchorme.js</h1>
<p class="tagline">A library to convert URLs to a clickable HTML anchor elements</p>
<p class="nav">
<a href="#page-features">Features</a>
<a href="#page-download">Getting started</a>
<a href="#page-options">Option</a>
<a href="#page-otheruses">Other uses</a>
<a href="#page-test">Test</a>
<a href="https://github.com/alexcorvi/anchorme.js/">Github</a>
<a href="#page-contributers">Contributers</a>
</p>
</header>
<hr>
<article id="page-features">
<h2>Features</h2>
<ul>
<li>Highly sensitive.</li>
<li>produces the least possible false positives if any.</li>
<li>Skips HTML, so it doesn't break your HTML if it had a URL as an attribute for an element.</li>
<li>Links with or without protocols.</li>
<li>Preserve upper and lower case, altough when detecting, it's basically case insensitive.</li>
<li>Supports checking against an almost full IANA list.</li>
<li>Works with IPs, FTPs, Emails and files.</li>
<li>Also works when ports are defined.</li>
<li>Small in size.</li>
<li>No regex involved, very readable and maintainable.</li>
<li>High performance.</li>
<li>Supports setting custom attributes with any values.</li>
<li>Supports checking for only IPs or for only Emails, or for only URLs</li>
<li>Helper methods can be used for other purposes.</li>
</ul>
</article>
<hr>
<article id="page-download">
<h2>Getting Started</h2>
<h3>Download</h3>
<p>To use this library, you can download the source code from github: <a href="https://github.com/alexcorvi/anchorme.js">Download</a></p>
<h5>1. Include the library file in your HTML</h5>
<code>
<script type="text/javascript" src="anchorme.min.js"></script>
</code>
<h5>2. Call the method</h5>
<code>
var someText = "this is a text with a link www.github.com ..";
<br>var result = anchorme.js(someText);
</code>
<h3>NPM</h3>
<p>To install via NPM <code>npm install anchorme.js</code></p>
<h3>Bower</h3>
<p>To install via bower <code>bower install anchorme.js --save</code></p>
</article>
<hr>
<article id="page-options">
<h2>Options</h2>
<p>Optionally, you can pass an object to the method on which you define some options</p>
<pre>
var options = {
"attributes":{
"class":"someClassHere",
"id":"someIdHere",
"anyAttribute":"anyValue",
},
"html":true,
ips:true,
emails:true,
urls:true,
TLDs:20,
truncate:25,
defaultProtocol:"http://"
};
anchorme.js("www.google.com.com",options);
</pre>
<br>
<h4>Explaination:</h4>
<ul>
<li><code>attributes</code> - Default: <code>false</code>, if you want your anchors links to have attributes just like the example above.</li>
<li><code>html</code> - Default: <code>true</code>, set this to true if you'll be passing HTML elements that has URLs i their attrivute to avoid breaking them. set this to false if you're not passing HTML to have better performance.</li>
<li><code>ips</code> - Default: <code>true</code>, whether or not to detect IPs.</li>
<li><code>emails</code> - Default: <code>true</code>, whether or not to detect emails.</li>
<li><code>urls</code> - Default: <code>true</code>, whether or not to detect URLs other than emails and IPs.</li>
<li><code>TLDs</code> - Default: <code>20</code>, the number of the TLDs to check. although the library has a large iana list of TLDs, but due to performance issues you might want to limit the number of TLDs that are checked, to the first most popular 20 TLDs for example. Enter <code>901</code> to check the full list, but be warned that checking against the full list of TLDs have adverse perforamance effects. However, if you want 100% sensitivity with the least possible false positives and you have a decent computing power, then go for it.</li>
<li><code>truncate</code> - Default: <code>0</code>, the number of charecters to keep from the input after truncate. If you don't want any truncation put it as <code>0</code>, however if you set this to say <code>15</code> it would take `www.google.com/somequeryhere` and return `<a href="http://www.google.com/somequeryhere">www.google.com/...</a>`. It's advisable to set this to a number greater than 25.</li>
<li><code>defaultProtocol</code> - Default: <code>"http://"</code>, for links that doesn't have protocol defined.</li>
</ul>
</article>
<hr>
<article id="page-otheruses">
<h2>Other uses</h2>
<p>Although the main purpose of this library is to convert unclickable text strings into an HTML anchor links, you can surely use it's methods for other purposes.</p>
<p>The source code is very readable, don't be afraid to check it.</p>
<p>An example of "other uses", is checking if a string is a valid email or not:</p>
<p><code>anchorme.checks.email("[email protected]",50)</code></p>
<p>Where <code>50</code> is the number of TLDs to check.</p>
</article>
<hr>
<article id="page-test" ng-app="myApp">
<h2>Test it before using</h2>
<div class="row" ng-controller="myCtrl">
<section class="container col-xs-6">
<h3>Input</h3>
<textarea id="textarea" class="form-control" ng-model="input"></textarea>
</section>
<section class="col-xs-6">
<h3>Result</h3>
<p id="resultPlace" ng-bind-html="renderHtml(linkedInput)"></p>
</section>
</div>
<br>
<p>Not getting a result that satisfies you? please, do open an issue on github: <a class="github-button" href="https://github.com/alexcorvi/anchorme.min.js/issues" data-icon="octicon-issue-opened" data-count-api="/repos/alexcorvi/anchorme.js#open_issues_count" data-count-aria-label="# issues on GitHub" aria-label="Issue alexcorvi/anchorme.js on GitHub">Issue</a></p>
</article>
<hr>
<hr>
<article id="page-contributers">
<h2>Contributers</h2>
<p>This library is authored and currently maintained by <a href="https://twitter.com/alex_corvi">Alex Corvi</a></p>
<p>It also has been empowered by the following contributers on github:</p>
<ul>
<li><a href="https://github.com/ChrisOelmueller">Chris Oelmueller</a></li>
<li><a href="https://github.com/davidschlachter">David Schlachter</a></li>
<li><a href="https://github.com/azagniotov">Alexander Zagniotov</a></li>
</ul>
</article>
<hr>
<footer>
<p>License: The MIT License (MIT) - Copyright (c) 2016 Alex Corvi</p>
<a class="github-button" href="https://github.com/alexcorvi" data-count-href="/alexcorvi/followers" data-count-api="/users/alexcorvi#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @alexcorvi on GitHub">Follow @alexcorvi</a>
<a class="github-button" href="https://github.com/alexcorvi/anchorme.js" data-icon="octicon-star" data-count-href="/alexcorvi/anchorme.js/stargazers" data-count-api="/repos/alexcorvi/anchorme.js#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star alexcorvi/anchorme.js on GitHub">Star</a>
<a class="github-button" href="https://github.com/alexcorvi/anchorme.js" data-icon="octicon-eye" data-count-href="/alexcorvi/anchorme.js/watchers" data-count-api="/repos/alexcorvi/anchorme.js#subscribers_count" data-count-aria-label="# watchers on GitHub" aria-label="Watch alexcorvi/anchorme.js on GitHub">Watch</a>
<a class="github-button" href="https://github.com/alexcorvi/anchorme.js/fork" data-icon="octicon-repo-forked" data-count-href="/alexcorvi/anchorme.js/network" data-count-api="/repos/alexcorvi/anchorme.js#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork alexcorvi/anchorme.js on GitHub">Fork</a>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</footer>
</body>
</html>