用Javascript模拟语法高亮显示

我正在尝试一些东西，只是为了好玩，当代码输入到网页上的文本区域时，我尝试模拟语法高亮显示

我已经写了一个小JS脚本，但它会抛出错误。 “无法设置未定义的属性‘颜色’。”

为此，我创建了一个由几个示例“buzzwords”组成的小数组来搜索输入的代码。然后，我将代码字符串拆分为一个数组，并在两者之间循环匹配。 我不太熟悉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（）{
setInterval（函数（）{
var代码=document.getElementById（“texty”）.value；
var buzzword=[“function”、“（）”、“{”、“}”、“[”、“]”、“.getElementById”、“.getElementsByClassName”、“.style”、“$”]；
对于（i=0；i

函数init（）在textarea的焦点上执行

---

任何帮助都将不胜感激，谢谢

我决定再试一次。我先前的回答被否决了。这里有一些代码。我还没能解决这个问题，但我已经测试过了，效果很好：

一些CSS：

<style> .blue { color: blue; } </style>

如果希望实时更新（或每次用户键入内容时更新），则应将

keyup

事件绑定到文本区域，以便每次运行

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>');

var buzzwords=['\\（\\）'，'function']；
previewDiv.innerHTML=textarea.value.replace（新的RegExp(
“（“+流行语.连接（“|”）+”，“g”
), '$1');

---

不要忘记使用两个反斜杠转义特殊字符：

（{}[]$

任意字符串没有样式，它们不是DOM的一部分，它们只是数据。不能将样式应用于textarea值的随机子字符串。代码

code.match（testers[i]）.style.color='blue'

永远不会起作用。继续@meagar所说的，这就是为什么在格式化用户输入的网站上通常有一个文本区域，您可以在其中提供输入，然后是另一个区域，您可以看到格式化输入的预览，例如stackoverflow应答文本区域和预览。这是一个很好的观点。关于能在文本区域捕捉某些单词并在单独的“预览”div中将它们涂成蓝色的代码，你有什么想法吗？@tinkerbot，我已经修改了我以前的错误答案，让你可以这么做。谢谢@Andy，你的新答案很好用！自从我问起，我对我的HTML做了一点修改，所以我不得不对你的解决方案做一点修改，但现在它可以工作了！然而，当我继续打字时，文本仍然是蓝色的。我需要它，所以只有匹配的单词是蓝色的，然后任何不匹配的都是默认颜色。你知道如何做到这一点吗？：）@小叮当-我已经更新了我的答案。希望事件侦听器代码会有所帮助。@tinkerbot，还需要检查是否有其他名为

blue

的样式，如果有，请将代码中的类更改为其他样式。

if (window.addEventListener) {
  document.getElementById('area').addEventListener('keyup', init, false);
} else {
  document.getElementById('area').attachEvent('keyup', init);
}

var buzzwords = ['\\(\\)', 'function'];
previewDiv.innerHTML = textarea.value.replace(new RegExp(
    '(' + buzzwords.join('|') + ')', 'g'
), '<span style="color:blue">$1</span>');