[英]Emulating syntax highlighting with Javascript
我正在尝试一些东西,确实只是出于一点乐趣,因此我试图在将代码输入到网页上的文本区域时模拟语法高亮显示。
我已经写了一些JS脚本,但是它引发了错误。 “无法设置未定义的属性'颜色'。”
为此,我创建了一个由几个示例“流行词”组成的小数组,以搜索输入的代码。 然后,我将代码字符串拆分为一个数组,并循环查找两者之间的匹配项。 我对split方法或搜索方法并不熟悉。 如何获得在屏幕上实时更改颜色的任何匹配项?
function init() {
window.setInterval(function() {
var code = document.getElementById("texty").value;
var buzzword = ["function","()","{","}","[","]",".getElementById",".getElementsByClassName",".style","$"];
for(i=0; i < buzzword.length; i++)
{
var testers = code.split(" ");
for(i =0; i < testers.length; i++)
{
if(buzzword[i] == testers[i])
{
code.search(testers[i]);
code.match(testers[i]).style.color = 'blue';
}
}
}
}, 10000);
}
函数init()在textarea的焦点上执行。
任何帮助,将不胜感激,谢谢!
我决定再做一次。 很安静,我以前的回答被击落了。 这是一些代码。 我无法对其进行jsfiddle,但我已经对其进行了测试,并且效果很好:
一些CSS:
<style> .blue { color: blue; } </style>
一些用于测试的HTML:
<div id="div"></div>
<textarea id="area" onfocus="init()">
function writeTo() {
var id = document.getElementById('id');
var class = document.getElementsByClass('class');
id.style.color = 'blue';
var $id = $('#id');
var array = [];
var obj = {};
}
</textarea>
一些Javascript。 这使用正则表达式而不是数组。 它在流行语上进行查找/替换,并用class="blue"
将其包装在一个范围内。 然后将文本转储到等待的div
:
function init() {
var area = document.getElementById('area');
var div = document.getElementById('div');
var buzzword = /function|.getElementById|.getElementsByClassName|.style|\{|\}|\(|\)|\$|\[|\]/g;
var text = area.value;
var replacedText = text.replace(buzzword, function (selection) {
return '<span class="blue">' + selection + '</span>';
});
div.innerHTML = replacedText;
}
如果要实时更新(或每次用户键入内容),则应将keyup
事件绑定到textarea以便每次都运行init
。 还有更多的是在这里 。
您应该摆脱onfocus
事件,并添加以下内容:
if (window.addEventListener) {
document.getElementById('area').addEventListener('keyup', init, false);
} else {
document.getElementById('area').attachEvent('keyup', init);
}
这将确保在键入textarea
,在div
的语法颜色应该是正确的。 确保对Javascript的调用位于HTML页面的底部,而不是标头中,否则它将无法识别该元素。
我会做这样的事情:
var buzzwords = ['\\(\\)', 'function'];
previewDiv.innerHTML = textarea.value.replace(new RegExp(
'(' + buzzwords.join('|') + ')', 'g'
), '<span style="color:blue">$1</span>');
不要忘记使用两个反斜杠来转义特殊字符: .(){}[]$
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.