-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
83 lines (71 loc) · 2.89 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>¶ Show formatting</title>
<style type="text/css">
#input, #output {
font-size: 300%;
width: 95%;
display: block;
margin: auto;
word-break: break-all;
}
.element { background: rgba(0,255,0,0.25); border-radius: 5px; padding: 0 10px; border: rgba(0,0,0,0.25) solid 1px; }
.element::before, .element::after { background: rgba(0,255,0,0.25); border-radius: 5px; }
.element::before { content: attr(start-title); }
.element::after { content: attr(end-title); }
.single span {position: fixed; left: -100px}
.single::before { content: attr(single-title); color: red }
</style>
<script type="text/javascript">
var replacements = {
"<": "<",
">": ">",
"&": "&",
" ": "<span class='single' single-title='␠'><span> </span></span>" ,
"\t": "<span class='single' single-title='␉'><span>\t</span></span>",
"\n": "<span class='single' single-title=''><span>\n</span></span>", //"␊",
"\r": "<span class='single' single-title='␍'><span>\r</span></span>",
"\u200f": "<span class='single' single-title='RLM'><span></span></span>",
"\u200e": "<span class='single' single-title='LRM'><span></span></span>",
"\e061c": "<span class='single' single-title='ALM'><span></span></span>",
'\u202a(.*?)\u202c' : "<span class='element' start-title='LRE' end-title='PDF'>$1</span>", // http://unicode.org/reports/tr9/
'\u202b(.*?)\u202c' : "<span class='element' start-title='RLE' end-title='PDF'>$1</span>",
'\u202d(.*?)\u202c' : "<span class='element' start-title='LRO' end-title='PDF'>$1</span>",
'\u202e(.*?)\u202c' : "<span class='element' start-title='RLO' end-title='PDF'>$1</span>",
'\u2066(.*?)\u2069' : "<span class='element' dir='ltr' start-title='LRI' end-title='PDI'>$1</span>",
'\u2067(.*?)\u2069' : "<span class='element' dir='rtl' start-title='RLI' end-title='PDI'>$1</span>",
'\u2068(.*?)\u2069' : "<span class='element' dir='auto' start-title='FSI' end-title='PDI'>$1</span>",
};
function convertRawToControlCharacters(input) {
for (var replacement in replacements) {
input = input.replace(new RegExp(replacement,'g'), replacements[replacement]);
}
return input;
}
function updateOutput() {
var input = document.getElementById("input").value;
document.getElementById("output").innerHTML = convertRawToControlCharacters(input);
}
document.addEventListener('DOMContentLoaded',function() {
let params = new URLSearchParams(document.location.search.substring(1));
let input = params.get("input");
if (input != null)
document.getElementById('input').value = input;
document.getElementById('input').addEventListener('input', updateOutput);
updateOutput();
}, false);
</script>
</head>
<body>
<fieldset>
<legend>Input</legend>
<input type="text" id="input" dir="auto" />
</fieldset>
<fieldset>
<legend>Formatting</legend>
<div type="text" readonly id="output" dir="auto" />
</fieldset>
</body>
</html>