Sistema Trova/Sostituisci univoco non funzionante

Question

Sto creando un sistema Trova/Sostituisci ma una delle funzioni principali non funziona.

quello che dovrebbe accadere:

Una volta che si esegue una ricerca tutte le parole trovate metterà in evidenza sulla pagina. Lo voglio in modo che tu possa cliccarlo e si apre un div dicendo: Sostituisci {WORD HERE} con {INPUT} e poi premi invio e sostituirà quella parola con il testo nell'Input.

Sto utilizzando il plugin findAndReplace e non voglio cambiarlo.

Cosa non funzionerà:

Dopo aver fatto clic sulla parola, la scatola si apre, ma non so come fare il testo trovato sostituire con quella di Input. Alcuni del mio codice è in un formiato One Line perché ho:

return 'Code Here'; 

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

Oh, e sto usando il plugin di scelta rapida per rendere la casella Mostra find CTRL + F (che sostituisce il Browser Trova System)

Nota in Javascript questo è il codice principale per la Ricerca:

$('#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; 
    }); 

Ecco il mio codice 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> 

Ho anche CSS ma non lo pubblicherò qui.

Il mio esempio è qui:

Find/Replace

auguro davvero qualcuno in grado di capire il codice mio modo e può aiutare.

Answer 1

Ecco il codice per il pulsante "Sostituisci" che appare quando si fa clic su una parola evidenziata:

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

Quello che sta facendo è di sostituire il contenuto del elemento evidenziato con un arco vuoto. È necessario inserire qualsiasi elemento digitato dall'utente nel campo di immissione ($("#input7430059098").val()) in tale intervallo.

Vorrei anche creare una funzione che può essere chiamata dal gestore dei clic del pulsante per eseguire la sostituzione, poiché sembra esserci già un sacco di codice nel gestore dei clic, ma sono solo io.

Edit:

Prova questo:

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