web-dev-qa-db-ja.com

Google ChromeまたはIEを使用してWebページ内の正規表現を検索するにはどうすればよいですか?

Google ChromeまたはIEを使用してWebページで「foo | bar」などの正規表現を検索するにはどうすればよいですか?「正規表現検索」拡張機能は知っていますが、機能しません(スラッシュを押しても何も起こりません。)Webストアのレビューは、これが多くのユーザーにとって一般的な問題であることを示しています。

73
Sarah

JavaScriptを使用して正規表現を照合する

多分あなたはクロムのコンソールでこれを試してみたい:

var p=/.*(regu).+?\ /gi; console.log( document.body.innerText.match(p) );

ただ コンソールを開く 、上のコンソールにコピーして貼り付け、 enter。このページでテストできます。
これが収まる場合は改善できます。

ここでは、コンソールの一致インデックスと一致したテキストを出力します。ここでは、regu、20文字前(または行の先頭の場合はそれ以下)、10文字後(またはeolの場合はそれ以下)を含むテキストを照合します。

var p=/.{0,20}regu[^ \n]+[^\n]{0,10}/gi;
while (m = p.exec(document.body.innerText)) { 
    console.log( 'Index: '+m.index+' Match: '+m ); }

これも試してみてください ペイントの背景 ページ上のすべての一致の 、rexexpは完璧ではありませんが、少なくともそれは すべき HTMLタグを混乱させない:

var p=/(\>{1}[^\n\<]*?)([^\n\<]{0,30}regu[^\n\<]{0,10})/gi,b=document.body;
b.innerHTML=b.innerHTML.replace(p,'$1<span style="background-color:red;">$2</span>');

これをブックマークする:

これを使用する別の方法は、javascript:プロトコル(上記と同じコード):

javascript:(function(){var p=/(\>{1}[^\n\<]*?)([^\n\<]{0,30}regu[^\n\<]{0,10})/gi,b=document.body;b.innerHTML=b.innerHTML.replace(p,'$1<span style="background-color:red;">$2</span>');})();

たとえば、javascript:プロトコル正規表現を検索するために、任意のWebページに小さな検索ボックスを挿入できます。
簡単な正規表現を使用して赤を削除することもできることはすでに知っていると思います マッチ ページから。
これを数時間開発し続けると、ブックマークに収まる検索プラグインができるかもしれません:)

正規表現検索 Google Chromeから。

正規表現を使用してWebページを検索できるシンプルな検索ユーティリティ。

開発中の機能

  • 見つかった結果を切り替える
  • 改善されたUI
  • 大文字と小文字の区別を切り替えます
  • 拡張機能を切り替えるためのショートカットを作成する
  • 検索時に「検索」ボタンをクリックする代わりに「Enter」キーを押すことを許可します

重要事項
これはページアクション拡張機能であるため、既に開いているページではすぐには機能しません。この拡張機能を使い始める前に、ブラウザを再起動することをお勧めします。開いているページを更新してみることもできます。

6
user

Find +拡張機能には良いレビューがあり、まだ言及されていません: https://chrome.google.com/webstore/detail/find%20-regex-find-in-page/fddffkdncgkkdjobemgbpojjeffmmofb?hl=en-US

私はそれを試しました、そしてそれは非常にうまく機能し、明確でシンプルなUIを持っています。

HTML要素全体でテキストを検索できます。私が試した他の人はそれを行うことができませんでした。

enter image description here

4
twasbrillig

言及された他の拡張機能は私にとってはうまくいかなかったので、私は自分のオープンソースchrome拡張機能をここで試すことができるように作成しました: https://chrome.google。 com/webstore/detail/regex-search/bcdabfmndggphffkchfdcekcokmbnkjl?hl = ja&gl = US

ソースコードはgithubで入手できます: https://github.com/gsingh93/regex-search

3
gsingh2011

Chromeでは、 Alt+Command+I 開発者ツールを開くには、ページのHTMLソースコード([ソース]タブの下)を選択し、 Command+F 検索し、.*(正規表現)記号を選択します。

テキストのみを検索する必要がある場合は、 pandoc を使用してHTMLをプレーンテキストに変換できます。

$ pandoc https://superuser.com/questions/417875 -t plain -o tmp.txt

次に、lessを使用して正規表現で検索します(/で検索)。

1
gmarmstrong

Chrome Developer Toolsモードで、 ctrlshiftF (Windowsでは、他のOSについては不明です)。

検索のための正規表現オプションがあります。これによりすべてのファイルが検索されるため、JavaScriptソースが含まれます。 HTMLのみに制限できる(方法)かわかりません。

1
Fuhrmanator

this Chromeプラグイン。

0
ultraon

実際には検索ではありませんが、この正規表現の蛍光ペン(どこかで見つけたもの)は非常に便利で、すべてのブラウザーで機能します。

javascript:(function(){var%20count=0,%20text,%20regexp;text=Prompt(%22Search%20regexp:%22,%20%22%22);if(text==null%20||%20text.length==0)return;try{regexp=new%20RegExp(%22(%22%20+%20text%20+%22)%22,%20%22i%22);}catch(er){alert(%22Unable%20to%20create%20regular%20expression%20using%20text%20'%22+text+%22'.\n\n%22+er);return;}function%20searchWithinNode(node,%20re){var%20pos,%20skip,%20spannode,%20middlebit,%20endbit,%20middleclone;skip=0;if(%20node.nodeType==3%20){pos=node.data.search(re);if(pos%3E=0){spannode=document.createElement(%22SPAN%22);spannode.style.backgroundColor=%22yellow%22;middlebit=node.splitText(pos);endbit=middlebit.splitText(RegExp.$1.length);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);++count;skip=1;}}else%20if(%20node.nodeType==1%20&&%20node.childNodes%20&&%20node.tagName.toUpperCase()!=%22SCRIPT%22%20&&%20node.tagName.toUpperCase!=%22STYLE%22){for%20(var%20child=0;%20child%20%3C%20node.childNodes.length;%20++child){child=child+searchWithinNode(node.childNodes[child],%20re);}}return%20skip;}window.status=%22Searching%20for%20%22+regexp+%22...%22;searchWithinNode(document.body,%20regexp);window.status=%22Found%20%22+count+%22%20match%22+(count==1?%22%22:%22es%22)+%22%20for%20%22+regexp+%22.%22;})();
0
ceiling cat