私がやりたいことは、Web ページの「古い」のすべてのインスタンスを、JS ブックマークレットまたはグリースモンキー スクリプトの「新しい」に置き換えることです。これどうやってするの?ブックマークレットとグリースモンキー スクリプトの両方にそれらを含めるためのハックがあるため、jQuery やその他のフレームワークは問題ないと思います。
8 に答える
壊れにくい関数。つまり、これはタグや属性には触れず、テキストのみに触れます。
function htmlreplace(a, b, element) {
if (!element) element = document.body;
var nodes = element.childNodes;
for (var n=0; n<nodes.length; n++) {
if (nodes[n].nodeType == Node.TEXT_NODE) {
var r = new RegExp(a, 'gi');
nodes[n].textContent = nodes[n].textContent.replace(r, b);
} else {
htmlreplace(a, b, nodes[n]);
}
}
}
htmlreplace('a', 'r');
ブックマークレットのバージョン:
javascript:function htmlreplace(a,b,element){if(!element)element=document.body;var nodes=element.childNodes;for(var n=0;n<nodes.length;n++){if(nodes[n].nodeType==Node.TEXT_NODE){nodes[n].textContent=nodes[n].textContent.replace(new RegExp(a,'gi'),b);}else{htmlreplace(a,b,nodes[n]);}}}htmlreplace('old','new');
innerHtml を置き換えると、ページにあるすべての dom イベントが破棄されます。ドキュメントをトラバースしてテキストを置き換えてみてください。
function newTheOlds(node) {
node = node || document.body;
if(node.nodeType == 3) {
// Text node
node.nodeValue = node.nodeValue.split('old').join('new');
} else {
var nodes = node.childNodes;
if(nodes) {
var i = nodes.length;
while(i--) newTheOlds(nodes[i]);
}
}
}
newTheOlds();
パターン マッチングが不要な場合は、「置換」よりも分割/結合の方が高速です。パターン マッチングが必要な場合は、"replace" と正規表現を使用します。
node.nodeValue = node.nodeValue.replace(/(?:dog|cat)(s?)/, 'buffalo$1');
ブックマークレットとして:
javascript:function newTheOlds(node){node=node||document.body;if(node.nodeType==3){node.nodeValue=node.nodeValue.split('old').join('new');}else{var nodes=node.childNodes;if(nodes){var i=nodes.length;while(i--)newTheOlds(nodes[i]);}}}newTheOlds();
さらに別の再帰的アプローチ:
function replaceText(oldText, newText, node){
node = node || document.body;
var childs = node.childNodes, i = 0;
while(node = childs[i]){
if (node.nodeType == Node.TEXT_NODE){
node.textContent = node.textContent.replace(oldText, newText);
} else {
replaceText(oldText, newText, node);
}
i++;
}
}
縮小されたブックマークレット:
javascript:function replaceText(ot,nt,n){n=n||document.body;var cs=n.childNodes,i=0;while(n=cs[i]){if(n.nodeType==Node.TEXT_NODE){n.textContent=n.textContent.replace(ot,nt);}else{replaceText(ot,nt,n);};i++;}};replaceText('old','new');
jQuery に沿って機能する単純な行:
`javascript:var a = function(){$("body").html($("body").html().replace(/old/g,'new'));return;}; a();`
jQuery を使用しない場合:
`javascript:function a (){document.body.innerHTML=document.body.innerHTML.replace(/old/g, "new" );return;}; a();`
何も返さない関数は非常に重要であるため、ブックマークレットを実行した後、ブラウザーはどこにもリダイレクトされません。
これを少し変更して、検索するテキストの後に置換するテキストを入力するように求め、すべての処理が完了すると、完了したことを知らせるダイアログ ボックスを表示するようにしています。
テキストで満たされた任意の数のテキストボックスを持つphpmyadminデータベース編集ページで使用する予定です(これは、で検索して置換するために必要なものです)。また、検索および置換するテキストは複数行である場合とそうでない場合があるため、正規表現に「m」パラメーターを追加しました。また、html を含む可能性のある検索/置換を行うため、それらは多くの場合、引用符/二重引用符が含まれます。元:
検索する:
<img height="76" width="92" src="http://www.gifs.net/Animation11/Hobbies_and_Entertainment/Games_and_Gambling/Slot_machine.gif" /></div>
<div class="rtecenter"> <strong><em><font color="#ff0000">Vegas Baby!<br />
</font></em></strong></div>
そして、何も置き換えない(そのコードをすべて消去するためだけに)、または他のhtmlに置き換えます。これまでのところ、これは私が思いついたブックマークレットです(javascript、特にブックマークレットは私が頻繁にいじるものではありません)が、プロンプトは正しく表示されますが、検索/置換に関しては何もしません。
javascript:var%20scrEl=document.createElement('script');scrEl.setAttribute('language','javascript');scrEl.setAttribute('type','text/javascript');scrEl.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');function%20htmlreplace(a,b,element){if(!element)element=document.body;var%20nodes=$(element).contents().each(function(){if(this.nodeType==Node.TEXT_NODE){var%20r=new%20RegExp(a,'gim');this.textContent=this.textContent.replace(r,b);}else{htmlreplace(a,b,this);alert('Done%20processing.');}});}htmlreplace(prompt('Text%20to%20find:',''),prompt('Replace%20with:',''));
誰にもアイデアはありますか?
これを試してみてください。問題は、ボディ全体を検索するため、属性なども変更されることです。
javascript:document.body.innerHTML=document.body.innerHTML.replace( /old/g, "new" );