查找並替換整個頁面

我試圖爲整個頁面創建一個查找和替換。查找並替換整個頁面

我使用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對發現的每一個項目。我已經做到了，所以它爲每個找到的項目添加了一個不同的隨機ID。現在我只需要JS。當我完成了這一切，我會希望它，所以當你點擊其中一個發現的話，它有一個彈出式（不警報）說：「用Word替換：{INPUT HERE}」然後它將取代只是這個詞。我認爲那很酷。

我發現的代碼是：

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>標籤插入到文檔中，所以我希望有另一種方式我可以做到這一點。它有點瘋狂的樣子。 Mabye你可以更好地看到它，並知道我想要什麼here

我希望有人可以提供幫助。謝謝。

來源

2011-10-16 Shawn31313

我在腳本的最後添加了下面的代碼。它從提示中獲取輸入，但它將'全部替換'，而不僅僅是您單擊的那個。

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

來源

2011-10-16 06:48:49 Salman

查找並替換整個頁面

回答

相關問題