Уникальная система поиска / замены не работает - PullRequest
Новая
       8

Уникальная система поиска / замены не работает

5 голосов
/ 19 октября 2011

Я создаю действительно систему поиска / замены, но одна из основных функций не работает.

Что должно произойти:

После поиска все найденные слова будут выделены на странице. Я хочу, чтобы вы могли щелкнуть по нему, и он открывает сообщение Div: замените {WORD HERE} на {INPUT}, а затем вы можете нажать «заменить», и оно заменит это слово текстом на входе.

Я использую плагин findAndReplace и не хочу его менять.

Что не будет работать:

После того, как вы щелкнете по слову, окно откроется, но я не знаю, как заставить найденный текст заменить на тот, что во вводе. Часть моего кода находится в формате One Line, потому что у меня есть: 

return 'Code Here';

Мой Javascript: 

shortcut.add("Ctrl+F", function() {
    $('#finder').animate({
        'bottom': '-53px'
    }, 100);
});
shortcut.add("Shift+F", function() {
    $('#finder').animate({
        'bottom': '0px'
    }, 100);
});
shortcut.add("Ctrl+C", function() {
    $('#finder').animate({
        'bottom': '-150px'
    }, 100);
});

function findAndReplace(searchText, replacement, searchNode) {
    if (!searchText || typeof replacement == '') {
        $('.r').css({
            'background': 'white',
            'color': 'black'
        });
        return;
    }
    if (!searchText || typeof replacement === 'undefined') {
        alert('No Items Found');
        $('.r').css({
            'background': 'white',
            'color': 'black'
        });
        return;
    }
    var regex = typeof searchText === 'string' ? new RegExp(searchText, 'g') : searchText,
        childNodes = (searchNode || document.body).childNodes,
        cnLength = childNodes.length,
        excludes = 'html,head,style,title,link,meta,script,object,iframe';
    while (cnLength--) {
        var currentNode = childNodes[cnLength];
        if (currentNode.nodeType === 1 && (excludes + ',').indexOf(currentNode.nodeName.toLowerCase() + ',') === -1) {
            arguments.callee(searchText, replacement, currentNode);
        }
        if (currentNode.nodeType !== 3 || !regex.test(currentNode.data)) {
            continue;
        }
        var parent = currentNode.parentNode,
            frag = (function() {
                var html = currentNode.data.replace(regex, replacement),
                    wrap = document.createElement('div'),
                    frag = document.createDocumentFragment();
                wrap.innerHTML = html;
                while (wrap.firstChild) {
                    frag.appendChild(wrap.firstChild);
                }
                return frag;
            })();
        parent.insertBefore(frag, currentNode);
        parent.removeChild(currentNode);
    }
}
$('#find').submit(function() {

    findAndReplace(document.getElementById('fText').value, function(hi) {
        var n = Math.floor(Math.random() * 9999999999);
        var o = Math.floor(Math.random() * 9999999999);
        var c = 'background:white;color:black;cursor:default;';
        var id = 'changer' + n + '';
        var onclick = "$('#replace_box" + n + "').slideDown();$('#black" + n + "').show();";
        var close = "$('#replace_box" + n + "').remove();$('#black" + n + "').remove();$('#highlight" + n + "').css({'background' : 'white', 'color':'black'});";
        var click = "$('.black').hide();$('#replace_box" + n + "').slideUp(900).delay(4000).remove();$('#highlight" + n + "').html('<span id=" + id + " style=" + c + "></span>');"
        return '<div id="black' + n + '" class="black"></div><span id="highlight' + n + '" class="r" style="background: yellow;color: black;cursor:pointer;position:relative;" onclick="' + onclick + '">' + hi + '<div id="replace_box' + n + '" class="box" style="position:absolute;top:77px;left:116px;"><div style="position:relative;"><div class="close" onclick="' + close + '">Close</div>Replace <b>' + hi + '</b> with <input id="input' + n + '" autocomplete="off"/><br><br><button id="buttons' + n + '" onclick="' + click + '">Replace!</button><div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div></div></div></span>';
    });
    return false;
});
$('#replace').submit(function() {
    findAndReplace(document.getElementById('fText').value, function() {
        var mon = $('#rText').val();
        return '<span class="highlight2" style="background: white;color: black;">' + mon + '</span>';
    });
    return false;
});

О, и я использую плагин «Ярлык» для отображения окна поиска на CTRL + F (Замена системы поиска в браузере)

Обратите внимание, в Javascript это основной код для Find: 

 $('#find').submit(function() {

        findAndReplace(document.getElementById('fText').value, function(hi){
        var n = Math.floor(Math.random() * 9999999999); 
        var o = Math.floor(Math.random() * 9999999999); 
        var c = 'background:white;color:black;cursor:default;';
        var id = 'changer'+n+'';
        var onclick = "$('#replace_box"+n+"').slideDown();$('#black"+n+"').show();";
        var close = "$('#replace_box"+n+"').remove();$('#black"+n+"').remove();$('#highlight"+n+"').css({'background' : 'white', 'color':'black'});";
        var click = "$('.black').hide();$('#replace_box"+n+"').slideUp(900).delay(4000).remove();$('#highlight"+n+"').html('<span id="+id+" style="+c+"></span>');"
        return '<div id="black'+n+'" class="black"></div><span id="highlight'+n+'" class="r" style="background: yellow;color: black;cursor:pointer;position:relative;" onclick="'+onclick+'">' + hi + '<div id="replace_box'+n+'" class="box" style="position:absolute;top:77px;left:116px;"><div style="position:relative;"><div class="close" onclick="'+close+'">Close</div>Replace <b>'+hi+'</b> with <input id="input'+n+'" autocomplete="off"/><br><br><button id="buttons'+n+'" onclick="'+click+'">Replace!</button><div class="chat-bubble-arrow"></div><div class="chat-bubble-arrow-border"></div></div></div></span>';
       });
       return false;
   });

Вот мой HTML: 

<div id="finder">  
<div style="position:relative;">
<form id="find" style="padding-bottom:10px;">
  <button class="close2" id="wa" onclick="$('#finder').animate({'bottom' : '-150px'}, 100);">X</button>
  <input id="fText" placeholder="Enter Text you wanna replace here!" autocomplete="off" style="width:210px;"/>
  <button>Find!</button>
</form>
<form id="replace">
  <input id="rText" placeholder="Replace all of the found items." autocomplete="off" style="width:210px;"/>
  <button>Replace All</button>
</form>
</div>
</div>
<div class="black"></div>
<div id="show"></div><div id="test"></div>
<div id="boxes"></div>

У меня также есть CSS, но я не буду публиковать это здесь.

Мой пример здесь:

Найти / Заменить

Действительно надеюсь, что кто-то может понять, как я кодирую, и может помочь.

1 Ответ

2 голосов
/ 22 октября 2011

Вот ваш код для кнопки «Заменить», которая появляется при нажатии на выделенное слово: 

<button id="buttons7430059098" onclick="$('.black').hide();$('#replace_box7430059098').slideUp(900).delay(4000).remove();$('#highlight7430059098').html('&lt;span id=changer7430059098 style=background:white;color:black;cursor:default;&gt;&lt;/span&gt;');">Replace!</button>

Что он делает, это заменяет содержимое выделенного элемента пустым интервалом.На самом деле вам нужно поместить все, что пользователь ввел в поле ввода ($("#input7430059098").val()) в этот диапазон.

Я бы также создал функцию, которую можно вызывать из обработчика щелчка кнопки, чтобы выполнить замену,поскольку в обработчике кликов уже есть много кода, но это только я.

Редактировать:

Попробуйте:

var click = "$('.black').hide();$('#replace_box"+n+"').slideUp(900).delay(4000).remove();$('#highlight"+n+"').html('<span id="+id+" style="+c+">' + $('#input" + n + "').val() + '</span>');";

...