как динамично да маркирате текст в html документ

Имам няколко елемента в HTML страница (които не споделят тип етикет), в които искам да маркирам всички екземпляри на дума, въведена от потребителя. Мисълта ми беше, че мога да направя това, като използвам функцията за замяна, за да заменя всички случаи на да речем "лисица" с

<font class='highlight'>fox</font>

Въпросът ми е как мога да направя тези елементи разпознаваеми? Опитах да използвам клас, но версията на IE на моята компания не поддържа getElementsByClassName. Някой знае ли по-добър начин да го направя?

Пример за това как може да изглежда страницата ми

<body>
    <h1>All about foxes</h1>
    <font>I'm a fox</font>
</body>

Само за да подчертая как те са различни типове тагове. В този пример, ако потребителят въведе „лисица“, лисицата в тага h1 и етикетът на шрифта ще бъдат осветени. Очевидно нещо трябва да се използва за идентифициране на h1 и таговете на шрифта като част от някаква група, която мога да хвана всички членове.

Тъй като съдържанието, което се показва на страницата, също се определя динамично, имам нужда от начин да направя това с помощта на Javascript.

РЕДАКТИРАНЕ: Допълнение към предишния пример за код.

<body>
    <h1>All about foxes</h1>
    <font>I'm a fox</font>
    <h3>I'm not a fox</h3>
</body>

Имам нужда от начин да маркирам конкретно етикетите h1 и шрифта (без да казвам, че всички h1 и шрифтове трябва да бъдат маркирани), така че те да се маркират, а h3 да не (както и всички други случаи на fox на страницата). Освен това е трудно да включвам външни JS файлове в моята среда (или всеки външен файл по този въпрос). Поради тази причина бих го предпочел, ако не трябваше да използвам JQuery.


javascript html highlight
person avorum    schedule 26.07.2013    source източник
comment
Използвайте regex, за да намерите текста.   -  person Ricardo Alvaro Lohmann    schedule 26.07.2013
comment
Може да използвате метод $('.class').css() в jquery.   -  person Ahmed Habib    schedule 26.07.2013

Отговори (1)


arrow_upward
1
arrow_downward

Ако вече имате class='highlight' на подходящите места, можете да използвате следното, което е функционално еквивалентно на getElementsByClassName:

elems = document.getElementsByTagName("*");
for ( i=0; i<elems.length; i++ )
{
  if ( elems[i].className == "highlight" )
     { elems[i].style.backgroundColor = "yellow"; }
}

Пример:http://jsfiddle.net/XU8Qz/

Просто направете всички промени в стила, от които се нуждаете, вместо да зададете цвета на фона на жълто.

person KatieK    schedule 26.07.2013