Текстовая тень в виде текста/метки xul xbl

Question

У меня есть список пучков имен. В качестве типов пользователей я хочу выделить совпадения текста в именах. (в стороне: если ничего не найдено, я показываю «Нет совпадений для« rar »).

Это моя цель графический макет:

Пользователь ввел «RAR» и он дал совпавшие «RAR» ы в названиях красный контур. Я могу выполнить это на всей этикетке с text-shadow: 0 0 1px red, но я не могу сделать это на части.

Я видел содержимое редактируемых divs http://html5demos.com/contenteditable выполнить это. Они могут давать разные цвета шрифтов для диапазонов. Метка xul я могу заменить текстовым полем xbl html и т. Д. Я просто не могу понять это.

Благодаря

Answer 1

Они могут дать разные цвета шрифта для диапазонов.

Эти диапазоны, по существу, обернуты в элементы прокрутки или шрифта, и те получат стиль. Вероятно, вы можете выполнить разделение текстовых узлов, создав Range(), установив его начало и конец внутри текстового узла, а затем используя range.surroundContents(), чтобы обернуть его во временный узел в стиле.

После того, как вам больше не понадобится текстовая тень, вы можете развернуть текст (просто заменив оболочку содержимым) и normalize текстовых узлов для восстановления исходного состояния.

Возможно, есть какой-то способ магически создать анонимные поля (например, CSS используется внутри для строк), но я недостаточно знаю, чтобы указать вам в правильном направлении для этого подхода.