अनन्य खोजें/बदलें सिस्टम नहीं काम कर रहा है

Question

मैं वास्तव में एक खोज/प्रतिस्थापन प्रणाली बना रहा हूं लेकिन मुख्य सुविधाओं में से एक काम नहीं कर रहा है।

क्या चाहिए था:

एक बार जब आप पृष्ठ पर प्रकाश डाला जाएगा पाया सभी शब्द खोज करते हैं। मुझे यह चाहिए कि आप इसे क्लिक कर सकें और यह एक div कहता है: {WORD यहां} को {INPUT} के साथ बदलें और फिर आप प्रतिस्थापित कर सकते हैं और यह उस शब्द को इनपुट में टेक्स्ट के साथ बदल देगा।

मैं findAndReplace प्लगइन का उपयोग कर रहा हूं और मैं इसे बदलना नहीं चाहता हूं।

क्या अभ्यस्त काम:

एक बार जब आप शब्द पर क्लिक करें, बॉक्स खुलता है, लेकिन मुझे पता है कि पाया पाठ इनपुट में से एक के साथ की जगह बनाने के लिए नहीं है।

return 'Code Here'; 

मेरे जावास्क्रिप्ट: क्योंकि मैं मेरे कोड से कुछ एक एक पंक्ति स्वरूप में है

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 खोज बॉक्स शो बनाने के लिए शॉर्टकट प्लगइन का उपयोग कर रहा + एफ जावास्क्रिप्ट में

नोट (ब्राउज़र प्रणाली का पता लगाएं की जगह) इस ढूँढें के लिए मुख्य कोड है:

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

यहां मेरा एचटीएमएल है:

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

मेरे पास सीएसएस भी है लेकिन मैं इसे यहां पोस्ट नहीं करूँगा।

मेरे उदाहरण यहाँ है:

Find/Replace

सच आशा किसी तरह से मैं कोड को समझ सकता हूँ और कर सकते हैं।

Answer 1

यहाँ "बदलें" बटन जब आप एक हाइलाइट किए गए शब्द पर क्लिक करने पर प्रकट करने के लिए अपने कोड है:

<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>');";