Найти и заменить всю страницу - PullRequest
Новая
       13

Найти и заменить всю страницу

1 голос
/ 16 октября 2011

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

Я использую findandreplace, который представляет собой мини-плагин, который: 

function findAndReplace(searchText, replacement, searchNode) {
    if (!searchText || typeof replacement === 'undefined') {
       alert("Please Enter Some Text Into the Field");
        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);
    }
}

В данный момент мне нужна кнопка поиска, чтобы создать отдельный JS для каждого найденного предмета. Я сделал так, чтобы он добавлял разные случайные идентификаторы для каждого найденного предмета. Теперь мне просто нужен JS. Когда я закончу со всем этим, я захочу, чтобы, когда вы щелкнете по одному из найденных слов, у него появилось всплывающее окно (не предупреждающее), говорящее: «Замените слово на: {ВХОД ЗДЕСЬ}». Затем оно заменит только это слово. Я думал, что это будет круто.

Мой код поиска: 

document.getElementById('find').onsubmit = function() {
    findAndReplace(document.getElementById('fText').value, function(hi) {
        var n = Math.floor(Math.random() * 9999999999);
        var s = Math.floor(Math.random() * 30);

        $('#fade').after('<span id="show' + n + '" style="display:none;"></span>');
        $('#show' + n + '').html(hi);
        $('body').prepend("<script type='text/javascript'>$('#highlight" + n + "').click(function(){$('#fade').show();});$('#highlight" + n + "').mouseover(function(){$('#highlight" + n + "').css('background', 'blue');});$('#highlight" + n + "').mouseout(function(){$('#highlight" + n + "').css('background', 'yellow');});</sc" + "ript>");
        return '<span id="highlight' + n + '" style="background: yellow;color: black;">' + hi + '</span>';

    });
    return false;
};

Я понял, что .html не может поместить теги <script> в документ, поэтому я надеюсь, что есть другой способ сделать это. Это немного сумасшедший вид. Мэйби, ты можешь видеть это лучше и знать, чего я хочу здесь

Я надеюсь, что кто-то может помочь. Спасибо.

1 Ответ

1 голос
/ 16 октября 2011

Я добавил следующий код в конец вашего скрипта.Он принимает входные данные из приглашения, но он «заменяет все», а не только тот, который вы щелкнули. 

$('span[id^=highlight]').live('click', function () {
    replacePrompt = prompt('Replace Word with:','{INPUT HERE}');
    findAndReplace(document.getElementById('fText').value, function() {
        return '<span class="highlight2" style="background: white;color: black;">' + replacePrompt + '</span>';
    });
    return false;
})

Может быть, я смогу что-то решить после прохождения вашей функции findAndReplace ..

ОБНОВЛЕНИЕ: решение состоит в том, чтобы вообще не использовать плагин findAndReplace.Я все еще не уверен, но это, вероятно, то, что вы хотите. 

$('span[id^=highlight]').live('click', function () {
    replacePrompt = prompt('Replace Word with:','{INPUT HERE}');
    $(this).text(replacePrompt);
})
...