Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   JavaScript. Форматирование текста текстового нода (https://javascript.ru/forum/misc/2532-javascript-formatirovanie-teksta-tekstovogo-noda.html)

<Pool> 11.01.2009 17:04

JavaScript. Форматирование текста текстового нода
 
Необходимо выделить определённые слова или словосочетания в html страничке загруженной в отдельный фрейм при помощи JavaScript. Я добрался до текстовых нодов. Подскажите, как правильнее применить какой либо стиль в определённых словах/словосочетаниях, хранящиеся в их nodeValue.

ZoNT 11.01.2009 18:43

примени стиль к ноду.
Если тебе нужно только отдельное слово из nodeValue, придётся разбивать текст на несколько частей, создавать новые ноды, присваивать каждой ноде по куску текста и применять ту ноду, которая содержит нужное слово.

<Pool> 14.01.2009 16:19

Приведу решение, вдруг кому поможет.
Задача была следующая: 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:21

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


//Находит и подсвечивает выбранные слова.
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);
	        }
        }
	}
}

Андрей Параничев 14.01.2009 16:45

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


Часовой пояс GMT +3, время: 15:13.