Question

我正在尝试一些东西，只是为了一点乐趣，我试图模拟语法突出显示代码输入到网页上的textarea。

我写了一个小小的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的onFocus上执行。

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

Answer 1

我决定再去一次。安静得正确我之前的回答被击落了。这是一些代码。我一直无法解决这个问题，但我已经测试了它并且工作正常：

一些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。 here上有更多内容。

你应该摆脱你的onfocus事件并改为添加：

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

这将确保当您输入textarea时，div中的语法着色应该没问题。确保对您的Javascript的调用位于HTML页面的底部，而不是在标题中，否则它将无法识别该元素。

Answer 2

我会做那样的事情：

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

不要忘记使用两个反斜杠来逃避特殊字符：.(){}[]$。

使用Javascript模拟语法突出显示

2 个答案: