Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
HTML Escape Tool

HTML Escape Tool

Um HTML-Code auf einer Webseite darstellen zu können, muss dieser "escaped" werden. Dieses Tool wandelt die zu escapene Zeichen um

Der hier verwendete Code

<link href="/css_webseite/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="/css_webseite/all.css" rel="stylesheet" media="screen"> <script src='/js_webseite/jquery.js' ></script> <form> <h1>HTML-Escape-Tool</h1> <p>Um HTML-Code auf einer Webseite darstellen zu können, muss dieser "escaped" werden. Hierbei werden die folgenden Elemente ersetzt:</p> <pre> &quot; wird ersetzt durch &amp;quot; &amp; ird ersetzt durch &amp;amp; &lt; ird ersetzt durch &amp;lt; &gt; ird ersetzt durch &amp;gt;</pre> <p>Dadurch wird der Code als Code dargestellt und nicht mehr vom Browser interpretiert.</p> <hr /> <div class="panel panel-info"> <div class="panel-heading"> <h2 class="panel-title">Eingabe</h2> </div> <div class="panel-body"> <div class="form-group"> <label>Text / Beschriftung</label> <textarea class="form-control" id="input" rows="5"></textarea> </div> <div class="form-group"> <input type="checkbox" name="pre" id="pre" /> PRE-Tag (vorformatierter Text) einfügen<br /> </div> </div> </div> <hr /> <div class="panel panel-primary"> <div class="panel-heading"> <h2 class="panel-title">Code</h2> </div> <div class="panel-body"> <textarea class="form-control" id="outputHtml" rows="8"></textarea> <br /> <button type="button" id="copyButton" class="btn btn-primary">Code kopieren</button> <button type="button" id="refreshButton" class="btn btn-default">Aktualisieren</button> <br /> <span id="msg"></span> </div> </div> <hr /> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">Anleitung / Beschreibung</h2> </div> <div class="panel-body"> <p>Den erstellten Text kopieren Sie und einfach an die gewünschte Stelle Ihrer Homepage einfügen.</p> </div> </div> </form> <script> $(document).ready(function () { $("#copyButton").click(function (event) { copyToClipboardMsg(document.getElementById("outputHtml"), "msg"); }); $( "#refreshButton" ).click(function() { generateHtml(); $("#msg").html("Code aktualisiert."); setTimeout(function () { $("#msg").html(""); }, 2000); }); }); function copyToClipboardMsg(elem, msgElem) { var succeed = copyToClipboard(elem); var msg; if (!succeed) { msg = "Kopieren wird nicht unterstützt. Markieren Sie den Code und verwenden Sie STRG + C zum Kopieren."; } else { msg = "Der Code wurde in die Zwischenablage kopiert."; } if (typeof msgElem === "string") { msgElem = document.getElementById(msgElem); } msgElem.innerHTML = msg; setTimeout(function () { msgElem.innerHTML = ""; }, 3000); } function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA"; var origSelectionStart, origSelectionEnd; if (isInput) { // can just use the original source element for the selection and copy target = elem; origSelectionStart = elem.selectionStart; origSelectionEnd = elem.selectionEnd; } else { // must use a temporary form element for the selection and copy target = document.getElementById(targetId); if (!target) { var target = document.createElement("textarea"); target.style.position = "absolute"; target.style.left = "-9999px"; target.style.top = "0"; target.id = targetId; document.body.appendChild(target); } target.textContent = elem.textContent; } // select the content var currentFocus = document.activeElement; target.focus(); target.setSelectionRange(0, target.value.length); // copy the selection var succeed; try { succeed = document.execCommand("copy"); } catch (e) { succeed = false; } // restore original focus if (currentFocus && typeof currentFocus.focus === "function") { currentFocus.focus(); } if (isInput) { // restore prior selection elem.setSelectionRange(origSelectionStart, origSelectionEnd); } else { // clear temporary content target.textContent = ""; } return succeed; } function replaceAll(str, find, replace) { return str.replace(new RegExp(find, 'g'), replace); } </script> <script> $(document).ready(function () { $("#input").on('input', function (event) { generateHtml(); }); $("#pre").change(function () { generateHtml(); }); generateHtml(); }); function generateHtml(){ var input = $("#input").val(); var optionType = $("input[name='optionView']:checked").val(); var pre = $('#pre').prop('checked'); var html = ""; input = replaceAll(input, "&", "&amp;"); input = replaceAll(input, "\"", "&quot;"); input = replaceAll(input, "<", "&lt;"); input = replaceAll(input, ">", "&gt;"); if (pre) { input = "<pre>" + input + "</pre>" } html += input + "\n"; $("#outputHtml").val(html); } </script>