Unikalny system Znajdź/zamień nie działa

Question

Tworzę naprawdę system Znajdź/Zamień, ale jedna z głównych funkcji nie działa.

Co powinno się zdarzyć:

Po przeszukać wszystkie słowa znalezione podświetli się na stronie. Chcę, żebyś mógł go kliknąć, a otworzy DIV mówiąc: Zamień {WORD HERE} na {INPUT}, a potem możesz uderzyć, a zastąpi to słowo tekstem w Input.

Używam wtyczki findAndReplace i nie chcę tego zmieniać.

Co przyzwyczajenie praca:

Po kliknięciu na słowo, otwiera się okno, ale nie wiem jak zrobić znaleziony tekst zastąpić jeden w wejściu. Niektóre z mojego kodu jest w mrówczanu jeden wiersz, ponieważ mam:

return 'Code Here'; 

My 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; 
}); 

Aha, używam wtyczki skrótów, aby pole wyboru Pokaż Znajdź w CTRL + F (Wymiana Browser Znajdź system)

notatkę w Javascript jest to kod główny dla 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; 
    }); 

Oto mój 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> 

Mam również CSS Ale nie będę tego tutaj zamieszczać.

Mój przykład jest tutaj:

Find/Replace

Naprawdę mam nadzieję, że ktoś może zrozumieć sposób kod I i może pomóc.

Answer 1

Oto kod dla przycisku „Zmień”, które pojawia się po kliknięciu na podświetlonym słowem:

<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> 

Co robi zastępuje zawartość zaznaczonego elementu z pustym przedziale. W tym polu musisz wstawić wszystko, co wpisał użytkownik w polu wejściowym ($("#input7430059098").val()).

Chciałbym również utworzyć funkcję, która może być wywołana z obsługi kliknięcia przycisku, aby zastąpić, ponieważ wydaje się, że istnieje wiele kodu bezpośrednio w obsłudze kliknięcia, ale to tylko ja.

Edit:

Spróbuj tego:

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