Эмуляция подсветки синтаксиса с помощью Javascript

Question

Я пытаюсь что-то сделать, просто для удовольствия, в результате чего я пытаюсь эмулировать подсветку синтаксиса, когда код вводится в текстовое поле на веб-странице.

Я написал небольшой скрипт 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() выполнена в фокусе текстового поля.

Любая помощь будет оценена, спасибо!

Answer 1

Я решил еще раз пойти на это. Спокойно, мой предыдущий ответ был сбит. Вот какой код. Я не был в состоянии 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 событие текстового поля для запуска 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>'); 

Не забывайте экранировать специальные символы, используя два обратных слеша: .(){}[]$.