Saya sedang mengerjakan tes pengetikan untuk kode pemrograman. Masalah yang dihadapi adalah bahwa semuanya berfungsi dengan baik untuk kode lain selain dari HTML dan JavaScript dan seperti yang dapat Anda tebak, itu karena perilaku browser untuk mengurai kode-kode itu bahkan jika disertakan dengan itu.

Masalahnya, kode sumbernya berasal dari sisi klien dan saya menampilkannya dengan htmlentities. Setelah itu, saya menggunakan javascript untuk highlight, timer, akurasi dan wpm. Sekarang masalahnya adalah <html>, <body>, <head> dan <script> tidak ditampilkan dalam teks sedangkan tag lainnya ditampilkan sebagai teks. Saya mencoba metode xml dan terkadang tidak berhasil. Sedangkan untuk tag <pre> dan <code>, keduanya tidak berfungsi sama sekali. Untuk keluar dari tag HTML, saya membuktikan sangat tidak mungkin untuk digunakan pada program saya karena ini adalah permainan mengetik. Misalnya jika saya menggunakan metode escaping, < akan menjadi &lt; dan saya tidak ingin pengguna saya mengetik &lt; hanya untuk mendapatkan < dengan benar. Untuk membuat area menjadi textarea, saya tidak bisa melakukannya karena program saya menyoroti karakter berikutnya yang akan diketik.

Adakah yang bisa memberi saya wawasan tentang cara menyelesaikan masalah? Saya juga dapat memposting beberapa kode sumber tetapi saya hanya akan melakukannya jika diperlukan.

EDIT: Saya cukup mengetahui kemungkinan duplikat tetapi sejauh yang saya ketahui, kasus saya sangat berbeda. Saya ingin menampilkan kode HTML tanpa keluar/mengganti karakter. Jika saya melakukannya, itu akan merusak konsep permainan di mana saya harus mengetik "<" hanya untuk mendapatkan "<" dengan benar.

-1
KenX 22 Oktober 2019, 08:58

2 jawaban

Jawaban Terbaik

Saya pikir Anda dapat mencoba ini, tidak yakin ini dapat membantu

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>
0
Zerhogi 22 Oktober 2019, 12:55

Menulis di File HTML:

  <script>

  var y="<head>";

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

</script>

Anda dapat menempatkan <div id="customDiv"></div> khusus di dalam file html Anda.

0
Scarecrow 27 Oktober 2019, 07:29