有没有替代方案<xml> ,<pre> , or escaping HTML tags to display HTML tags on a web page for a typing game program?</pre></xml>
[英]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?
问题描述
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 .
问题是，源代码来自客户端，我用htmlentities显示它。 After that, I use javascript for highlighting, timer, accuracy and wpm.之后，我使用 javascript 进行突出显示、计时器、准确性和 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.现在的问题是<html> 、 <body> 、 <head>和<script>没有显示在文本中，而其他标签显示为文本。 I tried the xml method and sometimes it doesn't work.我尝试了 xml 方法，有时它不起作用。 As for the <pre> and <code> tag, they don't work at all.至于<pre>和<code>标签，它们根本不起作用。 For escaping the HTML tags, I prove it quite impossible to use on my program since it is a typing game.对于 escaping 的 HTML 标签，我证明它完全不可能在我的程序中使用，因为它是一个打字游戏。 For example if I used escaping method, < will be <例如，如果我使用 escaping 方法， <将是< 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.我想显示 HTML 代码而不转义/替换字符。 If I did so, it'll break the concept of the game where I need to type "<" just to get "<" right.如果我这样做了，它将打破我需要输入“<”才能正确输入“<”的游戏概念。
2 个解决方案
解决方案1
0 已采纳 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>
解决方案2
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.您可以将自定义<div id="customDiv"></div>放入 html 文件中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.