Google検索結果をURLでフィルタするツールを作った


Google検索結果をURLでフィルタするユーティリティツールをJavaScriptで実装しました。

Github: [yuis-ice/Google-Search-URL-Filter: Google Search URL Filter](https://github.com/yuis-ice/Google-Search-URL-Filter)

![https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_3966d810-f30f-48d1-aaf2-fec5f2b132b8.png](https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_3966d810-f30f-48d1-aaf2-fec5f2b132b8.png)

tampermonkeyユーザースクリプトとして使う場合以下からダウンロードしてください。

[Google Search URL Filter](https://greasyfork.org/en/scripts/418765-google-search-url-filter)

ソースコードです。

```js 
(async function(){

  console.log("load, ");
  await import("https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js")

	$(document).ready(function(){
		console.log("load,,");

		(async function(){
			console.time('Google Search URL Filter');
			const sleep = m => new Promise(r => setTimeout(r, m))

			elem_searchbar = await document.querySelector("#tsf > div:nth-child(2) > div > div:nth-child(2)") ;
			clone = await elem_searchbar.cloneNode(true) ; // maybe need await for cloneNode
			clone02 = await elem_searchbar.cloneNode(true) ;
			elem_resultarea = await document.querySelector("div#res") ;
			await elem_resultarea.before(clone) ;
			await elem_resultarea.before(clone02) ;
			clone.querySelector("input").value = "" ;
			clone02.querySelector("input").value = "" ;
			await clone.querySelector('.clear-button').remove() ;
			await clone02.querySelector('.clear-button').remove() ;
			await clone.querySelector('div[aria-label="Search by voice"]').remove() ;
			await clone02.querySelector('div[aria-label="Search by voice"]').remove() ;
			await clone.querySelector('button[aria-label="Google Search"]').remove() ;
			await clone02.querySelector('button[aria-label="Google Search"]').remove() ;
			clone.querySelector("input").placeholder = "Type URL match text here" ;
			clone02.querySelector("input").placeholder = "Tags here e.g. not; tld; " ;

			[clone, clone02].forEach(item => {
				item.querySelector("input").addEventListener('input', async function(e){
					filter = clone.querySelector("input").value ;
					tag = clone02.querySelector("input").value ;
					console.log( this.value, filter, tag, new RegExp(filter,"g")) ;

					if ( tag == "not" ){
						console.log("not") ;
						[].slice.call( document.querySelectorAll("div#search div.g > div") )
						.forEach(a => a.hidden = false ) ;
						[].slice.call( document.querySelectorAll("div#search div.g > div") )
						.filter(a => ! ( a.querySelector("div#search div div.yuRUbf > a") && ! a.querySelector("div#search div div.yuRUbf > a").href.match(new RegExp(filter,"g")) ) )
						.forEach(a => console.log( a.hidden = true ) ) ;
					} else if ( tag == "tld" ){
						console.log("tld") ;
						[].slice.call( document.querySelectorAll("div#search div.g > div") )
						.forEach(a => a.hidden = false ) ;
						[].slice.call( document.querySelectorAll("div#search div.g > div") )
						.filter(a => ! ( a.querySelector("div#search div div.yuRUbf > a") && ! a.querySelector("div#search div div.yuRUbf > a").href.match(/https?:\/\/(.*?)(\/)?$/)[1].includes("/") ) )
						.forEach(a => console.log( a.hidden = true ) ) ;
					} else {
						[].slice.call( document.querySelectorAll("div#search div.g > div") )
						.forEach(a => a.hidden = false ) ;
						[].slice.call( document.querySelectorAll("div#search div.g > div") )
						.filter(a => ! ( a.querySelector("div#search div div.yuRUbf > a") && a.querySelector("div#search div div.yuRUbf > a").href.match(new RegExp(filter,"g")) ) )
						.forEach(a => console.log( a.hidden = true ) ) ;
					}
				});
			})

			console.timeEnd('Google Search URL Filter');
		})();

	});

})();
```

複数のエレメントへのイベントリスナー定義が`[clone, clone02].forEach()`みたいにできるというのは興味深いと思いました。これは今後も積極的に使っていきたい。

少し解決に時間を取られたのは、`clone = await elem_searchbar.cloneNode(true) ; `の部分です。cloneNodeは時間がかかるのは、awaitが必要みたいで、awaitつけないでやると`[clone, clone02].forEach()`らへんでclone02 undefinedになります。

こういうのはclonenodeよりReactとかで実装したほうがいいのかなと思ったりしました。プログラミングしないから完全に取り残されている。

Redditにポストしたら反応が良かったので久々にQiitaです。なんか規約とか変わってて変なことしてたら教えて下さい。

[Filter Google Search result by URLs with regular expression : javascript](https://www.reddit.com/r/javascript/comments/kfh5yb/filter_google_search_result_by_urls_with_regular/)

![https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_35338a76-3373-4891-b966-8f1647d27e94.png](https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_35338a76-3373-4891-b966-8f1647d27e94.png)

コードでわからないところがあればコメントしてください。そのために僕がいます。コーディングアドバイスもあればぜひお願いします。

Githubスター/フォークもぜひ。

Github: [yuis-ice/Google-Search-URL-Filter: Google Search URL Filter](https://github.com/yuis-ice/Google-Search-URL-Filter)