-
Notifications
You must be signed in to change notification settings - Fork 0
/
to_bbcode.html
77 lines (76 loc) · 2.43 KB
/
to_bbcode.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
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="main.css" />
<title>BBCode parser | JavaScript stuff</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<a id="back" href="index.html">⇦ Back</a>
<div class="container">
<h1>BBCode parser!</h1>
<p>
Hi there! Welcome to this BBCode parser! Try it out and see the results
below!
</p>
<textarea
placeholder="Type some BBCode here and see the output below!"
style="width: 100%; height: 200px"
onkeyup="go()"
id="input"
></textarea>
<div
style="border: 2px solid var(--color); border-radius: 10px; width: 95%"
id="output"
>
<p>You will see the output of the stuff you type in the box above here!</p>
</div>
</div>
<script>
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
function go() {
var c1 = escapeHtml(document.getElementById("input").value);
var d1 = document.getElementById("output");
$str = c1;
$format_search = [
/\[b\](.*?)\[\/b\]/gi,
/\[i\](.*?)\[\/i\]/gi,
/\[u\](.*?)\[\/u\]/gi,
/\[big\](.*?)\[\/big\]/gi,
/\[quote\](.*?)\[\/quote\]/gi,
/\[small\](.*?)\[\/small\]/gi,
/\[center\](.*?)\[\/center\]/gi,
/\[code\](.*?)\[\/code\]/gi,
];
$format_replace = [
"<strong>$1</strong>",
"<em>$1</em>",
'<span style="text-decoration: underline;">$1</span>',
'<span style="font-size: 30px;">$1</span>',
"<blockquote>$1</blockquote>",
'<span style="font-size: 8px;">$1</span>',
"<center>$1</center>",
'<span style="color: black; font-family: monospace; display: inline-block; border: 0.5px solid var(--color); border-radius: 5px; padding: 3px; background-color: var(--color-transparent);">$1</span>',
];
for (var i = 0; i < $format_search.length; i++) {
$str = $str.replace($format_search[i], $format_replace[i]);
}
d1.innerHTML = $str;
}
</script>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<script>
$("h1, h2, h3")
.css("text-align", "center")
.append(
'<hr style="height: 1px; background: linear-gradient(to right, transparent , var(--color), transparent); padding: 0px; border: none;">'
);
</script>