VPF::Подсветить кусок слова - Форум программистов

Innuendo

Дата 24.8.2006, 10:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

Произволится поиск на странице, мне нужно чтоб то что он нашел он подсветил? сделал бэкграунд другой.
Что мне упрощает, это то, что всё что я ищу находится в элементах <td> определенного класса.
Вот как тот кусок <td> - то слово или даже кусок слова занести в отдельный спан с background-color?

--------------------

Sardar

Дата 24.8.2006, 11:54 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Скурить это: http://xpoint.ru/know-how/WYSIWYG/TrueJavaScriptEditor?67
Затем доставать выделение и общего предка т.к. выделена может быть группа нод. Если это всё текст, то делим DOM поддерево на три части:

леваая, где закрываем все теги ушедшие дальше по селекции. Для этого создаём новую ноду этого же типа и кладём туда туда текст/вёрстку из поддерева.
серединка, убиваем вёрстку, нам интересен только текст. Можеш просто innerText/textContent взять целиком. Убеждаемся что это текст, а не таблциа и т.п., оборачиваем в span с нужными стилями.
праваяа, как и в левой закрываем все теги.

Мудрёно, но везде работать будет, в принципе по всему документу можно будет "маркировать" текст.

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Innuendo

Дата 24.8.2006, 12:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

ок, буду курить =)
я пока сделал просто:
s.replace(myword, ""+myword+"");
но думаю это не совсем подходит, тем более когда найденные слова пересекаются

--------------------

Sardar

Дата 24.8.2006, 13:22 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(Innuendo @ 24.8.2006, 11:48

)

но думаю это не совсем подходит

Угу, сразу несколько нод, при чём частями, может потребоваться заменить: При[ветвс]ем, в [] то что "подсвечиваем"

--------------------

Innuendo

Дата 24.8.2006, 13:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

да =) но
у меня слава богу там просто текст, но всё равно лучше сделать поуниверсальней =)

--------------------

JSman

Дата 25.8.2006, 00:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 279
Регистрация: 10.7.2006

Репутация: нет
Всего: 4

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

Innuendo

Дата 25.8.2006, 00:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

если честно, то мне только для Мозиллы так как скрипт читается их xul приложения

--------------------

JSman

Дата 25.8.2006, 00:49 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 279
Регистрация: 10.7.2006

Репутация: нет
Всего: 4

ну насколько я помню мозилла вполне поддерживает textRange. выполняем поиск, найденному сжатому textRange присваиваем новый контент со спаном.

911

Дата 27.8.2006, 02:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 25.8.2006

Репутация: нет
Всего: нет

Ммм щас секундочку..... smile

вот оно то что тебе надо!
Просто скопируй код и сделай HTML страничку! сверху вбиваеш слово которое надо найти в тексте жимеш кнопку,скрипт, выдает тебе слова и выделяет их! smile

Код


<HTML>
<HEAD>
<TITLE>TextRange.findText() Method</TITLE>
<script LANGUAGE="JavaScript">
// global range var for use with Undo
var rng

// return findText() third parameter arguments
function getArgs(form) {
    var isCaseSensitive = (form.caseSensitive.checked) ? 4 : 0
    var isWholeWord = (form.wholeWord.checked) ? 2 : 0
    return isCaseSensitive ^ isWholeWord
}

// prompted search and replace
function sAndR(form) {
    var srchString = form.searchString.value
    var replString = form.replaceString.value
    if (srchString) {
        var args = getArgs(form)
        rng = document.body.createTextRange()
        rng.moveToElementText(rights)
        clearUndoBuffer()
        while (rng.findText(srchString, 10000, args)) {
            rng.select()
            rng.scrollIntoView()
            if (confirm("Replace?")) {
                rng.text = replString
                pushUndoNew(rng, srchString, replString)
            }
            rng.collapse(false)        
        }    
    }
}

// unprompted search and replace with counter
function sAndRCount(form) {
    var srchString = form.searchString.value
    var replString = form.replaceString.value
    var i
    if (srchString) {
        var args = getArgs(form)
        rng = document.body.createTextRange()
        rng.moveToElementText(rights)
        for (i = 0; rng.findText(srchString, 10000, args); i++) {
            rng.text = replString
            pushUndoNew(rng, srchString, replString)
            rng.collapse(false)        
        }
        if (i > 1) {
            clearUndoBuffer()
        }
    }
    document.all.counter.innerText = i
}

// BEGIN UNDO BUFFER CODE
// buffer global variables
var newRanges = new Array()
var origSearchString

// store original search string and bookmarks of each replaced range
function pushUndoNew(rng, srchString, replString) {
    origSearchString = srchString
    rng.moveStart("character", -replString.length)
    newRanges[newRanges.length] = rng.getBookmark()
}

// empty array and search string global
function clearUndoBuffer() {
    document.all.counter.innerText = "0"
    origSearchString = ""
    newRanges.length = 0
}

// perform the undo
function undoReplace() {
    if (newRanges.length && origSearchString) {
        for (var i = 0; i < newRanges.length; i++) {
            rng.moveToBookmark(newRanges[i])
            rng.text = origSearchString
        }
        document.all.counter.innerText = i
        clearUndoBuffer()
    }
}
</SCRIPT>
</HEAD>
<BODY>
<H1>TextRange.findText() Method</H1>
<HR>
<FORM>
<P>Enter a string to search for in the following text:
<INPUT TYPE="text" NAME="searchString" SIZE=20 VALUE="Law"> &nbsp;
<INPUT TYPE="checkbox" NAME="caseSensitive">Case-sensitive &nbsp;
<INPUT TYPE="checkbox" NAME="wholeWord">Whole words only</P>
<P>Enter a string with which to replace found text:
<INPUT TYPE="text" NAME="replaceString" SIZE=20 VALUE="legislation"></P>
<P><INPUT TYPE="button" VALUE="Search and Replace (with prompt)" onClick="sAndR(this.form)"></P>
<P><INPUT TYPE="button" VALUE="Search, Replace, and Count (no prompt)" onClick="sAndRCount(this.form)">
<SPAN ID="counter">0</SPAN> items found and replaced.</P>
<P><INPUT TYPE="button" VALUE="Undo Search and Replace" onClick="undoReplace()"></P>
</FORM>

<DIV ID="rights">
<A NAME="article1">
<H2>ARTICLE I</H2>
</A>
<P>
Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the government for a redress of grievances.
</P>
[The rest of the text is snipped for printing here, but it is on the CD-ROM version.]
</DIV>
</BODY>
</HTML>

Вобщем я думаю это то что ты искал, и этот пример подходит тебе=)

Innuendo

Дата 27.8.2006, 14:54 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 745
Регистрация: 24.12.2005
Где: Молдова

Репутация: 2
Всего: 6

Вообще-то, я пока не вдавался в эту проблему. Я пока обошелся подсветкой через replace.
Но оно подтормаживает чё-то.
Спасибо 911, я пересмотрю кодец попозже =)

--------------------

911

Дата 27.8.2006, 16:07 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 25.8.2006

Репутация: нет
Всего: нет

Вобщем можно и так.... но TextRange.findText() Method Лучше=) smile

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »