-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathreplace.html
95 lines (87 loc) · 3.87 KB
/
replace.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="lib/log4javascript.js"></script>
<script type="text/javascript">
var appender = new log4javascript.InPageAppender();
log4javascript.getRootLogger().addAppender(appender);
var log = log4javascript.getRootLogger();
log4javascript.setShowStackTraces(true);
</script>
<!--
<script type="text/javascript" src="../src/js/rangy.js"></script>
-->
<script type="text/javascript" src="src/js/core/core.js"></script>
<script type="text/javascript" src="src/js/core/dom.js"></script>
<script type="text/javascript" src="src/js/core/domrange.js"></script>
<script type="text/javascript" src="src/js/core/wrappedrange.js"></script>
<script type="text/javascript" src="src/js/core/wrappedselection.js"></script>
<script type="text/javascript" src="src/js/modules/rangy-selectionsaverestore.js"></script>
<script type="text/javascript">
function createLink(matchedTextNode) {
var el = document.createElement("a");
el.style.backgroundColor = "yellow";
el.style.padding = "2px";
el.contentEditable = false;
var matchedName = matchedTextNode.data.slice(1); // Remove the leading @
el.href = "http://www.example.com/?name=" + matchedName;
matchedTextNode.data = matchedName;
el.appendChild(matchedTextNode);
return el;
}
function shouldLinkifyContents(el) {
return el.tagName != "A";
}
function surroundInElement(el, regex, surrounderCreateFunc, shouldSurroundFunc) {
var child = el.lastChild;
while (child) {
if (child.nodeType == 1 && shouldSurroundFunc(el)) {
surroundInElement(child, regex, createLink, shouldSurroundFunc);
} else if (child.nodeType == 3) {
surroundMatchingText(child, regex, surrounderCreateFunc);
}
child = child.previousSibling;
}
}
function surroundMatchingText(textNode, regex, surrounderCreateFunc) {
var parent = textNode.parentNode;
var result, surroundingNode, matchedTextNode, matchLength, matchedText;
while ( textNode && (result = regex.exec(textNode.data)) ) {
matchedTextNode = textNode.splitText(result.index);
matchedText = result[0];
matchLength = matchedText.length;
textNode = (matchedTextNode.length > matchLength) ?
matchedTextNode.splitText(matchLength) : null;
surroundingNode = surrounderCreateFunc(matchedTextNode.cloneNode(true));
parent.insertBefore(surroundingNode, matchedTextNode);
parent.removeChild(matchedTextNode);
}
}
function updateLinks() {
var el = document.getElementById("editable");
var savedSelection = rangy.saveSelection();
surroundInElement(el, /@\w+/, createLink, shouldLinkifyContents);
rangy.restoreSelection(savedSelection);
}
var keyTimer = null, keyDelay = 1000;
function keyUpLinkifyHandler() {
if (keyTimer) {
window.clearTimeout(keyTimer);
}
keyTimer = window.setTimeout(function() {
updateLinks();
keyTimer = null;
}, keyDelay);
}
</script>
</head>
<body>
<p>Some stuff</p>
<p contenteditable="true" id="editable" onkeyup="keyUpLinkifyHandler()">
Some editable content for @someone or other
</p>
<p>More stuff</p>
</body>
</html>