Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.01.2009, 16:04
Новичок на форуме
Отправить личное сообщение для <Pool> Посмотреть профиль Найти все сообщения от <Pool>
 
Регистрация: 11.01.2009
Сообщений: 5

JavaScript. Форматирование текста текстового нода
Необходимо выделить определённые слова или словосочетания в html страничке загруженной в отдельный фрейм при помощи JavaScript. Я добрался до текстовых нодов. Подскажите, как правильнее применить какой либо стиль в определённых словах/словосочетаниях, хранящиеся в их nodeValue.
Ответить с цитированием
  #2 (permalink)  
Старый 11.01.2009, 17:43
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 24.07.2008
Сообщений: 1,271

примени стиль к ноду.
Если тебе нужно только отдельное слово из nodeValue, придётся разбивать текст на несколько частей, создавать новые ноды, присваивать каждой ноде по куску текста и применять ту ноду, которая содержит нужное слово.
Ответить с цитированием
  #3 (permalink)  
Старый 14.01.2009, 15:19
Новичок на форуме
Отправить личное сообщение для <Pool> Посмотреть профиль Найти все сообщения от <Pool>
 
Регистрация: 11.01.2009
Сообщений: 5

Приведу решение, вдруг кому поможет.
Задача была следующая: 2 фрейма. В нижнем мы выбираем html файл в верхнем он отображается. В нижнем вводим ключевое слово, жмём кнопку, в верхнем эти слова подсвечиваются подсвечивается. Итак коды для JavaScript.


//Находит и подсвечивает выбранные слова.
function FindNlightKeywords()
{
    var searchWords = document.getElementById('inputKeywords').value;
	
	if(searchWords && searchWords!='')
	{   
	    var body = window.parent.frames[0].document.body;
	    
	    if(body)
		{   
		    if(initialBody)
            {
                body.innerHTML = initialBody;
            }
            else
            {
                initialBody = body.innerHTML;
            }
		    
			FindTextNodes(body,searchWords)
		}
	}
}


//Находит текстовые ноды документа.
function FindTextNodes(node,searchWord)
{
    var childItem =0;
    while(node.childNodes[childItem])
    {
        if(node.childNodes[childItem].nodeType==3)
        {
            childItem = LightKeywords(node,childItem,searchWord);
        }
        else
        {
            FindTextNodes(node.childNodes[childItem],searchWord);
        }
        childItem++;
    }
}


//Подсвечивает текстовые ноды, содержащие ключевые слова.
function LightKeywords(mainNode,childItem,searchWord)
{
    node = mainNode.childNodes[childItem];
    
    var startIndex = node.nodeValue.indexOf(searchWord);
    var endIndex = searchWord.length;
    
    if(startIndex!=-1)
    {
        var secondNode = node.splitText(startIndex);
        var thirdNode = secondNode.splitText(endIndex);
        
        var formatterSpan = mainNode.ownerDocument.createElement('span');
        formatterSpan.style.background="yellow";
        formatterSpan.innerHTML = searchWord;
        
        mainNode.replaceChild(formatterSpan,mainNode.childNodes[childItem+1]);
        
        childItem = childItem*1+2;
        
        if(mainNode.childNodes[childItem] && mainNode.childNodes[childItem].nodeValue.indexOf(searchWord)!=-1)
        {
            childItem = LightKeywords(mainNode,childItem,searchWord);
        }
    }
    
    return childItem;
}

Последний раз редактировалось <Pool>, 14.01.2009 в 16:47.
Ответить с цитированием
  #4 (permalink)  
Старый 14.01.2009, 15:21
Новичок на форуме
Отправить личное сообщение для <Pool> Посмотреть профиль Найти все сообщения от <Pool>
 
Регистрация: 11.01.2009
Сообщений: 5

Второе решение. Гораздо более приятное.


//Находит и подсвечивает выбранные слова.
function FindNlightKeywords()
{
    var searchWords = document.getElementById('inputKeywords').value;
	
	if(searchWords && searchWords!='')
	{   
	    var body = window.parent.frames[0].document.body;
	    
	    if(body)
	    {
	        if(initialBody)
            {
                body.innerHTML = initialBody;
            }
            else
            {
                initialBody = body.innerHTML;
            }
            
            var textRange = body.createTextRange();
	    
	        while(textRange.findText(searchWords))
	        {
	            textRange.execCommand('backcolor',false,'yellow');
	            textRange.collapse(false);
	        }
        }
	}
}

Последний раз редактировалось <Pool>, 14.01.2009 в 16:47.
Ответить с цитированием
  #5 (permalink)  
Старый 14.01.2009, 15:45
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

<Pool>,
Пользуйтесь bb-тегами [‬js] и [‬html] для оформления листингов кода в теле сообщения.
Ответить с цитированием
Ответ


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

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