как динамически выделить текст в html документе

У меня есть несколько элементов на странице HTML (которые не имеют общего типа тега), в которых я хочу выделить все экземпляры слова, введенного пользователем. Моя мысль заключалась в том, что я мог бы сделать это, используя функцию замены, чтобы заменить все экземпляры слова «лиса» на

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

Мой вопрос в том, как я могу сделать эти элементы идентифицируемыми? Я пытался использовать класс, но версия IE моей компании не поддерживает getElementsByClassName. Кто-нибудь знает лучший способ сделать это?

Пример того, как может выглядеть моя страница

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

Просто чтобы подчеркнуть, что это разные типы тегов. В этом примере, если пользователь ввел «лиса», лиса в теге h1 и теге шрифта будут выделены. Очевидно, нужно что-то использовать для идентификации тегов h1 и font как части какой-то группы, из которой я могу захватить всех членов.

Поскольку содержимое, отображаемое на странице, также определяется динамически, мне нужен способ сделать это с помощью Javascript.

РЕДАКТИРОВАТЬ: дополнение к предыдущему примеру кода.

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

Мне нужен способ специально пометить теги h1 и font (не говоря о том, что все 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