-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathLesson3-ClicableText.html
58 lines (46 loc) · 2.09 KB
/
Lesson3-ClicableText.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectable Text</title>
</head>
<body>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<p class="clickable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum ante nunc. Proin sit amet sem purus. Aliquam malesuada egestas metus, vel ornare purus sollicitudin at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta turpis ut mi pharetra rhoncus. Ut accumsan, leo quis hendrerit luctus, purus nunc suscipit libero, sit amet lacinia turpis neque gravida sapien. Nulla facilisis neque sit amet lacus ornare consectetur non ac massa. In purus quam, imperdiet eget tempor eu, consectetur eget turpis. Curabitur mauris neque, venenatis a sollicitudin consectetur, hendrerit in arcu.
</p>
<script>
//$(".clickable").click(function(e){
document.addEventListener('click', function(e) {
// class selector js
console.group("onClick");
s = window.getSelection();
var range = s.getRangeAt(0); // multiple selections MIGHT be possible
var node = s.anchorNode;
// Find starting point
text = range.toString();
while(text[0] != ' ') {
//console.log("Range.start", range.startOffset);
//console.log("Range length", text.length);
range.setStart(node, (range.startOffset -1));
text = range.toString();
}
//range.setStart(node, range.startOffset +1);
// Find ending point
while(text[text.length -1] != ' ' && text.charCodeAt(text.length -1) > 20) {
//console.log("Range.end", range.endOffset);
console.log("end", text.charCodeAt(text.length -1));
range.setEnd(node, (range.endOffset +1));
text = range.toString();
}
//range.setEnd(node, range.endOffset -1);
s = document.createElement("b");
range.surroundContents(s);
// Alert result
//var str = range.toString().trim();
// alert(str);
console.groupEnd();
});
</script>
</body>
</html>