Question

我正在为编程代码进行打字测试。遇到的问题是，除了HTML和JavaScript之外，其他所有代码都可以正常工作，而且您可以猜到，这是因为浏览器即使将这些代码括起来也可以解析这些代码。

问题是，源代码来自客户端，我将其显示为htmlentities。之后，我使用javascript来突出显示，计时器，准确性和wpm。现在的问题是<html>，<body>，<head>和<script>不在文本中显示，而其他标签在文本中显示。我尝试了xml方法，有时不起作用。至于<pre>和<code>标签，它们根本不起作用。为了逃避HTML标记，我证明在程序上无法使用它，因为它是打字游戏。例如，如果我使用转义方法，则<将是<，并且我不希望用户键入<只是为了使<正确。至于将该区域设置为文本区域，我不能这样做，因为我的程序会突出显示要键入的下一个字符。

任何人都可以给我提供有关如何解决问题的见解吗？我也可以发布一些源代码，但只有在需要时才这样做。

编辑：我非常了解可能的重复项，但是就我而言，我的情况有很大不同。我想显示HTML代码而不转义/替换字符。如果这样做，将打破游戏的概念，在这里我需要输入“ <”只是为了使“ <”正确。

Answer 1

我认为您可以尝试一下，不确定是否可以帮忙

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>

Answer 2

在HTML文件中书写：

  <script>

  var y="<head>";

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

</script>

您可以在HTML文件中放入自定义<div id="customDiv"></div>。

是否可以使用<xml>，<pre>，<code>或转义HTML标签在网页上显示用于打字游戏程序的HTML标签？

2 个答案: