独特的查找/替换系统不工作
Unique Find/Replace System Not Working
我正在创建一个真正的查找/替换系统,但其中一个主要功能不起作用。
应该发生什么:
一旦你搜索所有找到的单词将突出显示在页面上。我希望你可以点击它,它会打开一个Div说:用{INPUT}替换{WORD HERE}然后你可以点击替换它会用输入的文本替换那个单词。
我正在使用findAndReplace插件,我不想改变它。
行不通的地方:
一旦你点击这个词,这个框打开,但我不知道如何使找到的文本替换为一个在输入。我的一些代码是一行格式的,因为我有:
return 'Code Here';
我的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;
});
哦,我正在使用快捷插件使查找框显示在CTRL+F(取代浏览器查找系统)
注意在Javascript中这是Find: 的主代码 $('#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;
});
这是我的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>
我也有CSS,但我不会在这里发布。
My Example Is here:
查找/替换
真的希望有人能理解我的编码方式,可以帮助。
这是当你点击高亮显示的单词时出现的"Replace"按钮的代码:
<button id="buttons7430059098" onclick="$('.black').hide();$('#replace_box7430059098').slideUp(900).delay(4000).remove();$('#highlight7430059098').html('<span id=changer7430059098 style=background:white;color:black;cursor:default;></span>');">Replace!</button>
它所做的是将突出显示的元素的内容替换为空span。您需要实际地将用户在输入字段($("#input7430059098").val()
)中键入的任何内容放入该span中。
我还将创建一个可以从按钮的单击处理程序调用的函数来执行替换,因为在单击处理程序中似乎已经有很多代码,但这只是我。
编辑:试试这个:
var click = "$('.black').hide();$('#replace_box"+n+"').slideUp(900).delay(4000).remove();$('#highlight"+n+"').html('<span id="+id+" style="+c+">' + $('#input" + n + "').val() + '</span>');";
- 是否有任何设置阻止JavaScript在系统上工作
- 难以置信的简单密码系统不工作
- z索引堆栈系统未按预期工作
- ajax/php注释系统不工作
- 为什么 Math.log10 在某些系统上工作,但在其他系统上返回未定义
- 在 JQuery 无法正常工作的情况下注册系统
- 切换按钮不'我第一次在安卓系统上工作
- Facebook登录在浏览器中运行良好,但没有;我不能用phonegap在安卓系统上工作
- Marquee没有'在所有计算机系统上,设置超时不能正常工作
- JQuery请求在一个系统上工作,但在其他系统上不工作
- 如何解决window.scroll在安卓系统iFrame中不工作的问题
- Cordova 3.5-移动系统浏览器中的Android开放链接根本无法工作
- 投票系统在部署到heroku时不工作
- 当用户更改其系统日期时,由于SSL证书无效,JS无法工作
- 正在尝试使登录系统正常工作
- Javascript/HTML5-简单的文件系统不工作
- 当一个实时网站在文件系统中工作时,是什么导致它无法工作
- 文件系统API不工作在Chrome v27 &v29
- Django, Jquery Ajax;投票系统不工作,正在刷新分区
- Magento:我在CMS页面上有一个工作的“添加到购物车”按钮……我如何使“自定义数量”系统工作