в прямом эфире выделить слово (а) с JQuery - PullRequest
Новая
       17

в прямом эфире выделить слово (а) с JQuery

2 голосов
/ 20 мая 2011

Я хочу жить выделять слова с помощью jQuery.Я использую событие live keyup для запуска подсветки, так что подсветка изменяется при вводе слов (для этого используется поле ввода текста)

Я нашел фрагмент кода, который работает нормально, но этот код неработает с событием live keyup, поэтому оно оборачивает первую букву и останавливается там.

Вот мой HTML: 

<input type="text" id="input" name="input"/>
<div id="content-block"><p>lorem ip sum </p></div>

Вот мой JS: 

$('#input').live('keyup', function() {
    $('#input').trigger('highLight');
});

$('#input').bind('highLight', function() {
    var o = {words:$('input[name="input"]').val()};
    highlight("content-block",  o);
});

function highlight(id, options) {

    var o = {
                words: '',
                caseSensitive: false,
                wordsOnly: true,
                template: '$1<span class="highlight">$2</span>$3'
            }, 
        pattern;

    $.extend(true, o, options || {});

    if (o.words.length == 0) { return; }
    pattern = new RegExp('(>[^<.]*)(' + o.words + ')([^<.]*)', o.caseSensitive ? "" : "ig");

    $('#'+id).each(function() {

        var content = $(this).html();

        if (!content) return;
        $(this).html(content.replace(pattern, o.template));

    });

}

Ответы [ 2 ]

3 голосов
/ 20 мая 2011

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

HTML выглядит следующим образом после ввода "l":

<p><span class="highlight">l</span>orem ip sum</p>

«lorem» больше не будет соответствовать из-за промежутка.

Теперь с решением:

Вот исправление, которое должно получитьон делает то, что вы хотите: 

$('#' + id).each(function() {
    $('span.highlight',this).replaceWith($('span.highlight',this).text()); // Fix

    var content = $(this).html();

    if (!content) return;
    $(this).html(content.replace(pattern, o.template));
});

Предполагая, что у вас будет только один выделенный диапазон, строка ниже удаляет диапазон и заменяет его содержащимся в нем текстом.Тогда замена происходит как обычно. 

$('span.highlight',this).replaceWith($('span.highlight',this).text()

Рабочий пример здесь: http://jsfiddle.net/ryanrolds/N4DCR/

0 голосов
/ 20 мая 2011

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

pattern = new RegExp('(>[^<.]*)(' + o.words + ')([^<.]*)', (o.caseSensitive ? "" : "i") + "g");
...