forked from lonekorean/highlight-within-textarea
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (108 loc) · 3.61 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Highlight Within Textarea</title>
<!-- need jQuery, obviously -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- highlight-within-textarea CSS/JS -->
<link href="./jquery.highlight-within-textarea.css" rel="stylesheet">
<script src="./jquery.highlight-within-textarea.js"></script>
<!-- make things pretty -->
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Mono);
body {
max-width: 900px;
margin: 40px auto;
font: 18px/1.4 'Open Sans', sans-serif;
color: #555;
background-color: #eee;
}
a {
display: inline-block;
padding: 10px 20px;
border: 1px solid #fff;
border-radius: 10px;
color: #fff;
background-color: #777;
text-decoration: none;
}
section {
margin-top: 60px;
}
script {
display: block;
margin-top: 10px;
padding-left: 10px;
border-left: 8px solid #ccc;
white-space: pre-wrap;
font: 14px/1.4 'Roboto Mono', sans-serif;
}
/* background and positioning */
.hwt-container {
background-color: #fff;
}
/* size and formatting */
.hwt-content {
width: 500px;
height: 100px;
padding: 20px;
color: #555;
font: 18px/25px 'Roboto Mono', sans-serif;
}
/* highlights */
.hwt-content mark {
border-radius: 3px;
}
.hwt-content mark:nth-of-type(2n) {
background-color: #cfdeab;
}
.hwt-content mark:nth-of-type(2n+1) {
background-color: #b1d5e5;
}
</style>
</head>
<body>
<p><a href="https://github.com/lonekorean/highlight-within-textarea/tree/master">Go to GitHub repo</a></p>
<h1>Highlight Within Textarea</h1>
<p>Some use cases with code snippets. The magic happens by providing an onInput callback to specify what to highlight. The following examples show how.</p>
<section>
<h2>Using Regex</h2>
<p>You can specify an onInput callback that returns a regex. Text matched by the regex will be highlighted. This example simply highlights all numbers.</p>
<textarea class="regex-example">1600 Pennsylvania Ave NW, Washington, DC 20500</textarea>
<script>
function onInputRegex(input) {
return /\d+/g;
}
$('textarea.regex-example').highlightWithinTextarea(onInputRegex);
</script>
</section>
<section>
<h2>Using Regex Again</h2>
<p>A common use case is to highlight from a list of 1 or more strings. This is easily done with regex. This example highlights certain country names.</p>
<textarea class="regex-again-example">There are about 5,000 potato varieties worldwide. Three thousand of them are found in the Andes alone, mainly in Peru, Bolivia, Ecuador, Chile, and Colombia.</textarea>
<script>
function onInputRegexAgain(input) {
return /chile|ecuador|peru/gi;
}
$('textarea.regex-again-example').highlightWithinTextarea(onInputRegexAgain);
</script>
</section>
<section>
<h2>Using Array</h2>
<p>The onInput callback can also return an array of arrays to specify highlights by character position. Each inner array has 2 values: a starting index (inclusive) and an ending index (exclusive). This example highlights the first 10 characters and the last 10 characters, as long as there are enough characters to do so.</p>
<textarea class="array-example">Bears are mammals of the family Ursidae.</textarea>
<script>
function onInputArray(input) {
var length = input.length;
if (length >= 20) {
return [[0, 10], [length - 10, length]];
} else {
return [];
}
}
$('textarea.array-example').highlightWithinTextarea(onInputArray);
</script>
</section>
</body>
</html>