VPF::textRange, выделение текста - Форум программистов

JAYBE

Дата 13.9.2013, 00:50 (ссылка)

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

Загрузка ...

Бывалый

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

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

Добрый день.
Стоит зада по поиску и выделеню текста, набранного в поле Input.
Мой тестовый код такой:

Код


window.onload = function() {
    search_DOM = document.getElementById("search_field");
        container_DOM = document.getElementsByTagName("body")[0].childNodes[3];
    search_DOM.onkeyup = function() {
        console.log(this.value)
    }
    find(container_DOM, 'на')
}
var range;

function find(el, text) {
    if (el.childNodes.length) {
        for (var i=0; i<el.childNodes.length; i+=1 ) {
            if (el.childNodes[i].nodeType===1) {
                find(el.childNodes[i])
            } else {
                el.childNodes[i].data.replace(/12/gi, function(a,b,c) {
                    var rng = document.createRange();
                    rng.selectNode(el.childNodes[i])
                    rng.setStart(el.childNodes[i], b);
                    rng.setEnd(el.childNodes[i], b+text.length);
                    selection = window.getSelection();
                    selection.addRange(rng);
                    console.log(b)
                    return text;
                })
            }
        }
    }
}

Происходит выделение первого совпадаения в строке DOM-элемента, а остальные не поулчается выделить.
Верно ли, что выделение текста нельзя сделать мульти, тоесть поставить выделения в разных частях текста?

Kekek

Дата 13.9.2013, 10:45 (ссылка)

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

Загрузка ...

Шустрый

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

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

Так и вручную с помощью клавиатуры нельзя выделить два участка.

akizelokro

Дата 13.9.2013, 21:17 (ссылка)

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

Загрузка ...

Крокодил

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

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

Другим цветом можно.

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

a = a + b; b = a - b; a = a - b;

JAYBE

Дата 16.9.2013, 16:31 (ссылка)

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

Загрузка ...

Бывалый

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

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

Так и сделал:

Код


window.onload = function() {
    var find_value = "",
        search_DOM = document.getElementById("search_field");
        container_DOM = document.getElementsByTagName("body")[0].childNodes[3];
    search_DOM.onkeyup = function() {
        if (this.value!==find_value) {
            container_DOM.innerHTML = container_DOM.innerHTML.replace(new RegExp('<span class=[\'"]selected[\'"]>'+'['+find_value.split('').join('][')+']'+'<\/span>', 'g'), function() {
                return find_value;
            })
            find_value = this.value;
            find(container_DOM, this.value);
        } else {
            return false;
        }
    }
}

function find(el, text) {
    if (el.childNodes.length) {
        for (var i=0; i<el.childNodes.length; i+=1 ) {
            if (el.childNodes[i].nodeType===1) {
                find(el.childNodes[i], text);
            } else {
                el.childNodes[i].data = el.childNodes[i].nodeValue.replace(new RegExp('['+text.split('').join('][')+']', 'g'), function(a,b,c) {
                    return "<span class='selected'></span>";
                })
            }
        }
    }
    el.innerHTML = el.innerHTML.replace(/&lt;span class='selected'&gt;&lt;\/span&gt;/g, function() {
        return "<span class='selected'>"+text+"</span>";
    })
}

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