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
| <!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8">
<title>TITLE</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<p>Texte avant</p>
<pre id="text" style="height: 200px;width:600px;border:1px solid black;white-space:normal;overflow-x:scroll" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <mark>Phasellus cursus</mark> lacus non ligula pellentesque rutrum. Proin vestibulum cursus nisi ac egestas. Morbi fermentum nisl justo, luctus laoreet tortor cursus egestas. Nam volutpat est nunc, vitae rutrum turpis sollicitudin id. Duis id fermentum lectus, a finibus massa. Donec condimentum porttitor vehicula. Pellentesque interdum, lacus eget sodales iaculis, eros neque luctus metus, non varius felis nisi vel leo. Nam leo purus, mattis a convallis eget, mattis ac ex. Etiam feugiat metus eget feugiat consectetur. Nunc id mattis urna. Ut non justo ut tellus pharetra ultricies a at tellus. Nulla tincidunt eros sit amet semper pharetra. Aliquam erat volutpat. Vivamus in semper felis. Nunc vel dolor varius, tincidunt magna sit amet, semper augue. Etiam cursus imperdiet viverra. </pre>
<br>Start: <span id="start"></span>
<br>End: <span id="end"></span>
<br>Length: <span id="length"></span>
<script>
$('#text')
.keypress(function (event) {
return checkEventAllowed(event);
})
.keyup(function () {
showPosition();
})
.mouseup(function () {
showPosition();
})
.blur(function () {
highlight();
});
function getSelectionOffsetsWithin(elementId) {
var start = 0, end = 0, length = 0;
var range, priorRange;
if (typeof window.getSelection != "undefined") {
range = window.getSelection().getRangeAt(0);
priorRange = range.cloneRange();
priorRange.selectNodeContents(document.getElementById(elementId));
priorRange.setEnd(range.startContainer, range.startOffset);
start = priorRange.toString().length;
end = start + range.toString().length;
length = range.toString().length;
if (!range.collapsed) end--;
}
return {
start: start,
end: end,
length: length
};
}
function checkEventAllowed(event) {
var keyCode = event.which ? event.which : event.keyCode;
// Allow copy
if (event.ctrlKey && keyCode === 99) return true;
// Allow only cursor moving
if ($.inArray(keyCode, [1, 35, 36, 37, 38, 39, 40]) < 0) {
return false;
}
return true;
}
function showPosition() {
var positions = getSelectionOffsetsWithin('text');
$('#start').text(positions.start);
$('#end').text(positions.end);
$('#length').text(positions.length);
}
function highlight() {
var from = parseInt($('#start').text());
var to = parseInt($('#end').text());
var text = $('#text').text();
console.log(from + ' ' + to);
var html = text.substring(0, from) + "<mark>" + text.substring(from, to + 1) + "</mark>" + text.substring(to + 1, text.length);
$('#text').html(html);
}
</script>
</body>
</html> |
