查找并替换整个页面 [英] Find and Replace for whole page
问题描述
我使用findandreplace这是一个迷你插件，它是：
函数findAndReplace（searchText，replacement，searchNode）{
if（！searchText || typeof replacement ==='undefined'） {
alert（请在字段中输入一些文字）;
return;
}
var regex = typeof searchText ==='string'？
new RegExp（searchText，'g'）：searchText，
childNodes =（searchNode || document.body）.childNodes，
cnLength = childNodes.length，
excludes ='的HTML，头，风格，标题，链接，元，脚本对象，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）;
$ b现在我需要查找按钮来做一个找到每个项目的单独的JS。我已经这样做了，它为每个找到的项目添加了一个不同的随机ID。现在我只需要JS。当我完成了这一切，我会希望它，所以当你点击一个发现的单词，它有一个弹出式（不警报）说：替换Word：{INPUT HERE}然后它将取代只是这个词。我认为这将很酷。
我的查找代码是：
$ p $ 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）;
$ b $（'＃fade'）。 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 =backgroun d：yellow; color：black;>'+ hi +'< / span>;
}）;
返回false;
};
我发现.html不能放置< script> 标签到一个文件，所以我希望有另一种方式，我可以做到这一点。
它看起来有点疯狂。 Mabye你可以看得更清楚，知道我想要什么这里
我希望有人能帮忙。谢谢。
我在脚本的最后添加了下面的代码。它接受来自提示的输入，但它将全部取代，而不仅仅是您点击的那个。
$ $ p'$ live（'click'，function（）{
replacePrompt = prompt（'将Word替换为'，'{INPUT HERE}'）;
findAndReplace（document。 getElementById（'fText'）。value，function（）{
return'< span class =highlight2style =background：white; color：black;>'+ replacePrompt +'< / span> ;';
}）;
return false;
}）
也许我可以通过你的 findAndReplace 函数来解决问题。
更新：解决方案是根本不使用 findAndReplace 插件。我仍然不确定，但这可能是你想要的。
$（'span [id ^ = highlight]'）。 live（'click'，function（）{
replacePrompt = prompt（'将Word替换为'，'{INPUT HERE}'）;
$（this）.text（replacePrompt）;
}）
I'm trying to create a Find and Replace for the whole page.
I'm Using findandreplace which is a mini-plugin which is:
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);
}
}
At the moment I need the find button to make a seperate JS for each Item found. I have made it so it adds a different random ID for each found item. Now I just need the JS. When Im done with the whole this I will want it so when you click on one of the found words it has a popup(not alert) saying: "Replace Word with: {INPUT HERE}" Then it will replace just that word. I thought that would be cool.
My find code is:
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;
};
I figured out that .html cant place <script> tags into a document so I hope there is another way I can do this.
Its a little crazy looking. Mabye you can see it better and know what I want here
I hope someone can help. Thank you.
I added the following code at the end of your script. It takes input from a prompt but it will 'replace all', not just the one that you click.
$('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;
})
Maybe I can work something out after going through your findAndReplace function..
UPDATE: A solution is to not use the findAndReplace plugin at all. I am still not sure but this is probably what you want.
$('span[id^=highlight]').live('click', function () {
replacePrompt = prompt('Replace Word with:','{INPUT HERE}');
$(this).text(replacePrompt);
})
这篇关于查找并替换整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
