Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.04.2014, 12:04
Аспирант
Отправить личное сообщение для NapalmRain Посмотреть профиль Найти все сообщения от NapalmRain
 
Регистрация: 17.03.2014
Сообщений: 40

replace исключая в атрибутах тегов
Доброго всем времени суток!
Есть небольшая задачка, сделать подсветку синтаксиса кода на странице.
Есть массив зарезервированных слов, которые должны подсвечиваться в тексте.
скрипт проходит по этому массиву примерно так:
for (var k in words) {
text = replaceAll(text, words[k]);
}

Внутри функции replaceAll тоже всё просто
tempString = string.replace(new RegExp(word, 'g'), '<span class="codeword">'+word+'</span>');

Так вот тут возникает проблемка, если среди зарезервированных слов встречается, к примеру слово class, то оно учитывается и внутри тегов и тег
<span class="codeword">
превращается в
<span <span class="codeword">class="codeword">

Прошу подсказать, как реализовать замену всего этого добра исключая теги. То есть смотреть текст только между тегами.
Я понимаю, что нужно составить регулярное выражение, наверное, что-то из цикла:
replace(/>([^"]+)</g, '>$1<');
только вот мне куда-то сюда ещё нужно вместить значение моей переменной word.
И тогда ещё встанет вопрос, а как же быть, если тегов нет вовсе...
Я честно говоря, плохо разбираюсь в регулярных выражениях в принципе. Прошу подсказки.

Заранее благодарю!
Ответить с цитированием
  #2 (permalink)  
Старый 02.04.2014, 12:37
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Не люблю сложные регулярки, поэтому, если текст небольшой, я бы сначала нашел все теги

наверное такое выражение подойдет
/<(?:(?:[^>]|\n)*)>/
и выполнил бы для них escape, заменил нужные слова, а потом unescape

Последний раз редактировалось Octane, 02.04.2014 в 12:40.
Ответить с цитированием
  #3 (permalink)  
Старый 02.04.2014, 12:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

NapalmRain,
jQuery highlight plugin — поиск и подсветка слов в тексте
Ответить с цитированием
  #4 (permalink)  
Старый 02.04.2014, 13:53
Аспирант
Отправить личное сообщение для NapalmRain Посмотреть профиль Найти все сообщения от NapalmRain
 
Регистрация: 17.03.2014
Сообщений: 40

Сообщение от рони Посмотреть сообщение
NapalmRain,
jQuery highlight plugin — поиск и подсветка слов в тексте
За ссылку спасибо!
Обязательно посмотрю,почитаю.

Но хочется именно для себя сделать нечто своё. Это не какая-то конкретная задача, которую мне поставили и я пытаюсь её выполнить. Это просто задача от самого себя для саморазвития.
Ответить с цитированием
  #5 (permalink)  
Старый 02.04.2014, 13:53
Аспирант
Отправить личное сообщение для NapalmRain Посмотреть профиль Найти все сообщения от NapalmRain
 
Регистрация: 17.03.2014
Сообщений: 40

Сообщение от Octane Посмотреть сообщение
Не люблю сложные регулярки, поэтому, если текст небольшой, я бы сначала нашел все теги

наверное такое выражение подойдет
/<(?:(?:[^>]|\n)*)>/
и выполнил бы для них escape, заменил нужные слова, а потом unescape
Благодарю! Попробую посмотреть в данном направлении.
Ответить с цитированием
  #6 (permalink)  
Старый 02.04.2014, 16:37
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

NapalmRain, если замену нужно делать в живом DOM'е, то вместо использования innerHTML можно пройтись по всем текстовым нодам и сделать замену. Это конечно будеть работать чуть медленней, зато не надо париться со сложными регулярками.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #7 (permalink)  
Старый 02.04.2014, 16:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,129

Сообщение от danik.js
пройтись по всем текстовым нодам и сделать замену. Это конечно будеть работать чуть медленней, зато не надо париться
плагин по ссылке выше именно так и делает, но вы туда неходите )))
Ответить с цитированием
  #8 (permalink)  
Старый 02.04.2014, 17:09
Аспирант
Отправить личное сообщение для NapalmRain Посмотреть профиль Найти все сообщения от NapalmRain
 
Регистрация: 17.03.2014
Сообщений: 40

Сообщение от рони Посмотреть сообщение
плагин по ссылке выше именно так и делает, но вы туда неходите )))
Ну как я уже сказал, задачей изначально было решить вопрос самостоятельно.

Учусь я. А учиться лучше всего получается на решении ошибок.

Результат вообще получился интересным и совсем не по тому пути, по которому пошёл изначально.

Не откажусь от комментариев:
(function( $ ){
	var phpWords = ['public', 'private', 'static', 'function', 'class', 'if', 'switch', 'case', 'break', 'echo', 'die', 'else', 'require_once', 'include', '$'];
	
	var init = function (object, arrayOfWords) {
		var words = [];
		for (var k in arrayOfWords) {
			words[arrayOfWords[k]] = arrayOfWords[k];
		}
		var include = object.html();
		var lines = include.split('\n');
		var newInclude = null;
		var wordsInLine;
		newInclude = '<table>';
		newInclude += '<tr class="codeLines"><td class="linesNubmbers">';
		for (var key in lines) {	
			num = parseInt(key)+1;
			newInclude += num+'<br>';
		}
		newInclude += '</td>';
		newInclude += '<td class="codeBlock">';
		for (var key in lines) {
			wordsInLine = lines[key].split(" ");
			for (var k in wordsInLine) {
				if (typeof(words[wordsInLine[k].trim()])!=='undefined') {
					wordsInLine[k] = '<span class="codeword">'+wordsInLine[k]+'</span>';
				}
			}
			lines[key] = wordsInLine.join(' ');
			
			newInclude += lines[key]+'<br>';
		}
		newInclude += '</td></tr>';
		newInclude += '</table>';
		object.html(newInclude);
	}
	
	$.fn.testsintax = function(language) {
		switch (language) {
			case 'php':
				init($(this), phpWords);
				break;
			case 'delphi':
				init($(this), delphiWords);
				break;
			case 'javascript': break;
			case 'java': break;
			case 'code': break;
			case 'c#': break;
	}
  };

})( jQuery );

$('document').ready(function() {
	$('#php').testsintax('php');
});

Опустил из кода всё, что касается конкретных языков, комментариев и прочих деталей. Только подсветка слов, заранее указанных в массиве.

Последний раз редактировалось NapalmRain, 02.04.2014 в 17:12.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DOM модель подсчет тегов документа kent666 Events/DOM/Window 4 17.10.2011 21:51
Вытащить со страницы все значения name и value из тегов <input> qwr938 Общие вопросы Javascript 8 13.02.2011 15:16
Перебор вложенных тегов. werdes jQuery 0 27.07.2010 11:51
Выбрать несколько тегов из DOM Alex78 Events/DOM/Window 1 08.10.2009 17:21
Как переместить курсор внутри тегов? alex-v Javascript под браузер 8 29.08.2009 23:07