簡體   English   中英

有沒有替代方案<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.

問題是,源代碼來自客戶端,我用htmlentities顯示它。 之后,我使用 javascript 進行突出顯示、計時器、准確性和 wpm。 現在的問題是<html><body><head><script>沒有顯示在文本中,而其他標簽顯示為文本。 我嘗試了 xml 方法,有時它不起作用。 至於<pre><code>標簽,它們根本不起作用。 對於 escaping 的 HTML 標簽,我證明它完全不可能在我的程序中使用,因為它是一個打字游戲。 例如,如果我使用 escaping 方法, <將是&lt; 我不希望我的用戶輸入&lt; 只是為了得到<正確的。 至於使該區域成為文本區域,我不能這樣做,因為我的程序會突出顯示要輸入的下一個字符。

誰能給我有關如何解決問題的見解? 我也可以發布一些源代碼,但我只會在需要時這樣做。

編輯:我很清楚可能的重復,但就我而言,我的情況完全不同。 我想顯示 HTML 代碼而不轉義/替換字符。 如果我這樣做了,它將打破我需要輸入“<”才能正確輸入“<”的游戲概念。

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">&ltscript&gt some script &lt/script&gt</div> <textarea id="input"></textarea>

Writing in the HTML File:

  <script>

  var y="<head>";

  $('#customDiv').text(y);

</script>

您可以將自定義<div id="customDiv"></div>放入 html 文件中。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM