Is there any alternative for <xml>, <pre>, <code> or escaping HTML tags to display HTML tags on a web page for a typing game program?
Question
I am working on a typing test for programming codes. The problem that is encountered is that everything works fine for other code aside from HTML and JavaScript and as you can guess, it is because of the behavior of browser to parse those codes even if enclosed with those.
The thing is, the source codes are coming from client-side and I display it with htmlentities . After that, I use javascript for highlighting, timer, accuracy and wpm. Now the problem is that the <html> , <body> , <head> and <script> are not showing in text whereas the other tags are showing as text. I tried the xml method and sometimes it doesn't work. As for the <pre> and <code> tag, they don't work at all. For escaping the HTML tags, I prove it quite impossible to use on my program since it is a typing game. For example if I used escaping method, < will be < and I don't want my user to type < just to get < right. As for making the area a textarea, I cannot do that since my program highlights the next character to be typed.
Would anyone be able to give me an insight on how to solve the problem? I could also post some source code but I'll only do so if needed.
EDIT: I am quite aware of possible duplicates but as far as I am concerned, my case is pretty different. I want to display the HTML codes without escaping/replacing characters. If I did so, it'll break the concept of the game where I need to type "<" just to get "<" right.
2 answers
solution1
0 ACCPTED 2019-10-22 06:47:46
i think you can try this, not sure this can help
var input = document.getElementById('input'); var output = document.getElementById('output'); var text = output.textContent; input.addEventListener('input', function(e){ var inputText = input.value.toString(); var copy = text.substr(0, inputText.length); var lastText = ''; for(var j=copy.length;j<text.length;j++){ lastText+=text[j]; } if (inputText == copy){ output.innerHTML = '<span class="blue" id="span"></span><span id="newoutput"></span>' var newoutput = document.getElementById('newoutput'); var span = document.getElementById('span'); newoutput.textContent = lastText; span.textContent = copy } })
#input{ width: 300px; height: 400px; resize: none; }.blue{ background-color: blue; } #output{ width: 400px; } #span{ width: 300px; }
<div id="output"><script> some script </script></div> <textarea id="input"></textarea>
solution2
0 2019-10-27 07:29:20
Writing in the HTML File:
<script>
var y="<head>";
$('#customDiv').text(y);
</script>
You can put a custom <div id="customDiv"></div> inside your html file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.