html5 输入框中代码高亮,javascript – 将HTML语法高亮显示到textarea中以编写代码...

我有一个看似简单的问题,但我担心这对我自己来说太复杂了.我正在尝试将textarea实现到一个网页,用户可以在其中编写HTML代码,按下按钮,解释的html页面显示在代码旁边的div中.非常类似于w3schools“试试”部分.

到目前为止,我已经实现了所有功能,并且它几乎按预期工作,当您按下按钮时,代码可以正确地呈现在正确的位置.下一步是在textarea中实现语法突出显示,以便根据键入的标记或属性重新着色文本.基本上,我希望这个行为与编写HTML代码时记事本的行为完全一样.文本变为蓝色,属性=“”文本变为红色等.

我的想法是,我需要以某种方式逐字地读取textarea中的内容,针对所有可能的标记和属性名称进行测试,并使用彩色文本重新填充textarea.从我所看到的情况来看,我认为传统的textarea不可能实现这一点,而且我可能不得不实现一个专门的applet代替textarea.有谁知道实现这一目标的最不痛苦的方法是什么？我是一名即将完成学位的计算机科学专业,但我对网络编程的了解非常有限,我只是开始深入研究jquery和jsp,尽管我对HTML / CSS / Javascript有很多经验.

解决方法:

我过去也有类似的要求.我找到了一个很棒的基于Javascript的代码编辑器,可以嵌入到您的Web应用程序中.

编辑器支持语法高亮,自动缩进,智能自动建议等.

使用它就像导入脚本一样简单：

并使用代码镜像编辑器替换文本区域：

var myCodeMirror = CodeMirror(function(elt) {

myTextArea.parentNode.replaceChild(elt, myTextArea);

}, {value: myTextArea.value});

如果您使用的是JQuery,可以这样做：

var myCodeMirror = CodeMirror(function(elt) {

$('#my-code-input').replaceWith(elt);

}, {value: $('#my-code-input').val()});

标签：jquery,javascript,css,jsp,html

来源： https://codeday.me/bug/20190624/1275831.html