escape-html/index.html at master · ozayo/escape-html · GitHub

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HTML Escape TOOL</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
  </head>
  <body>
    <div class="container">
      <h1 class="mt-4 mb-4 fw-bold">HTML Escape Tool</h1>
      <p>
        HTML Escape is a tool for HTML escaping process. When escaping, it
        replaces special HTML characters with their HTML equivalents (entities).
      </p>
      <p>
        For example, if you need to post a piece of HTML/JavaScript code in your
        article/blog post/any other HTML document, you need to escape it to make
        browsers don't treat it as HTML. It means that you need to replace all
        HTML reserved characters (<samp>&lt;, &gt;, &amp;, "</samp>) into their
        entities (<samp>&amp;lt;, &amp;gt;, &amp;amp;, &amp;quot;</samp>,
        accordingly). This tool simplifies such a task.
      </p>

      <div class="input-group mt-2 mb-2" style="min-height: 250px">
        <span class="input-group-text">Paste your code</span>
        <textarea
          id="htmlescape"
          class="form-control"
          aria-label="With textarea"
        ></textarea>
      </div>

      <!-- Select options -->
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          value=""
          id="flexCheckDefault"
          checked
          disabled
        />
        <label class="form-check-label" for="flexCheckDefault">
          HTML reserved characters (<samp>&lt;</samp> → <samp>&amp;lt;</samp>,
          <samp>&gt;</samp> → <samp>&amp;gt;</samp>, <samp>&amp;</samp> →
          <samp>&amp;amp;</samp>, <samp>"</samp> → <samp>&amp;quot;</samp>)
        </label>
      </div>
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          value=""
          id="escape-apostrophe"
        />
        <label class="form-check-label" for="escape-apostrophe">
          Included single quotes (<samp>'</samp> → <samp>&amp;apos;</samp>)
        </label>
      </div>

      <button class="btn btn-primary mt-2" type="button" onclick="escapeHtml()">
        Escape HTML
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          fill="currentColor"
          class="bi bi-arrow-down-short"
          viewBox="0 0 16 16"
        >
          <path
            fill-rule="evenodd"
            d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"
          />
        </svg>
      </button>
      <div class="input-group mt-4 mb-2" style="min-height: 250px">
        <span class="input-group-text">Escaped code</span>
        <textarea
          id="htmlescaperesult"
          class="form-control"
          aria-label="With textarea"
        ></textarea>
      </div>
      <a href="#" onclick="copyToClipboard()">Copy to clipboard
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
          <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
          <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
        </svg>
      </a>
      <span
        class="badge rounded-pill text-bg-success"
        id="copied"
        style="display: none; width: 100px;"
      >
        Copied
      </span>
    </div>

    <footer class="bg-light text-center text-lg-start mt-4">
      <div class="text-center p-3">

        <p>
        <a href="https://github.com/ozayo/escape-html" class="text-decoration-none" target="_blank">
          GitHub link
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
          <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
          </svg>
        </a>
        </p>
        <p style="font-size: 12px;">© 2023 by Ozay Ozdemir. Created with <a href="https://getbootstrap.com/" target="_blank" >Bootstrap</a></p>
      </div>

    <script>
      function escapeHtml() {
        let htmlescape = document.getElementById("htmlescape").value;
        let escapedHtml = htmlescape
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/"/g, "&quot;");
        if (document.getElementById("escape-apostrophe").checked) {
          escapedHtml = escapedHtml.replace(/'/g, "&apos;");
        }
        document.getElementById("htmlescaperesult").value = escapedHtml;
      }

      function copyToClipboard() {
        const copyToClipboard = document.getElementById("htmlescaperesult");
        copyToClipboard.select();
        document.execCommand("copy");
        document.getElementById("copied").style.display = "block";
        setTimeout(() => {
          document.getElementById("copied").style.display = "none";
        }, 2000);
      }
      document
        .getElementById("copytoclipboard")
        .addEventListener("click", copyToClipboard);
    </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>