JavaScript. Форматирование текста текстового нода
Необходимо выделить определённые слова или словосочетания в html страничке загруженной в отдельный фрейм при помощи JavaScript. Я добрался до текстовых нодов. Подскажите, как правильнее применить какой либо стиль в определённых словах/словосочетаниях, хранящиеся в их nodeValue.
|
примени стиль к ноду.
Если тебе нужно только отдельное слово из nodeValue, придётся разбивать текст на несколько частей, создавать новые ноды, присваивать каждой ноде по куску текста и применять ту ноду, которая содержит нужное слово. |
Приведу решение, вдруг кому поможет.
Задача была следующая: 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;
}
|
Второе решение. Гораздо более приятное.
//Находит и подсвечивает выбранные слова.
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>,
Пользуйтесь bb-тегами [js] и [html] для оформления листингов кода в теле сообщения. |
| Часовой пояс GMT +3, время: 13:06. |