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

У меня есть пара элементов на странице 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.

EDIT: В дополнение к предыдущему примеру кода.

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

мне нужно так, чтобы отметить h1 и шрифта теги специально (не говоря, что все h1-х и шрифта должны быть отмечены), так что они будут освещены и h3 не будет (а также любые другие случаи лисы на странице). Кроме того, больно включать внешние JS-файлы в мою среду (или любой внешний файл, если на то пошло). По этой причине я предпочел бы, если бы мне не пришлось использовать JQuery.

источник

2013-07-26 avorum

Используйте 'regex', чтобы найти текст. –

В jquery можно использовать метод $ ('. Class'). Css(). –

Если вы уже получили 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/

Просто делать то, что стиль изменяет вам нужно вместо того, чтобы установить фоновый цвет на желтый.

источник

2013-07-26 18:17:36 KatieK

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

ответ

Смежные вопросы