查找并替换整个页面

我试图为整个页面创建一个查找和替换。查找并替换整个页面

我使用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

查找并替换整个页面

回答

相关问题