JSを使ってサイト内ページの日英リンクのチェックをやる
今後も使いそうなのでメモ。
やりたいこと
例えば、案件で数百ページ以上規模のウェブサイトを新システムに移行するときに、
日本語サイトと対になる英語サイトがあり、日本語ページのヘッダー部分あたりに同種の英語ページに飛ぶリンク（＝以降日英リンク）があったりする。
そのリンク先URLが正しいかのチェックをしたい。
前提
全ページについて、各日本語ページがどの英語ページと対になっているかの正となるリストは存在する。
コード
次の通り（もっといい書き方があるかもだが）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<title>日英リンク整合性確認用</title>
<style>
.hidden { display:none }
</style>
</head>
<body>
<h1>日英リンク整合性確認用</h1>
<ul>
<li><button class="show-all-reslut">全件表示に戻す</button></li>
<li><button class="show-ok-reslut-only">OKのみ表示</button></li>
<li><button class="show-ng-reslut-only">NGのみ表示</button></li>
<li><button class="show-fail-reslut-only">読込エラーのみ表示</button></li>
</ul>
<p id="progress">チェックを開始しています...</p>
<table id="result">
<tr>
<th>チェック対象URL</th>
<th>ページの他言語リンクに設定のURL</th>
<th>正となるページの他言語リンクのURL</th>
<th>結果</th>
</tr>
</table>
</body>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$(function(){
//チェック対象URLのリスト。
var arr__url_target = [
'/j/aaa/bbb.html',
'/j/ccc/ddd.html',
'/e/aaa/bbb_en.html',
'/e/ccc/ddd.html'
]
/*
ページと正となる日英リンクのリンク先のペアから成るハッシュリスト。
チェック対象URLの日英リンク設定の正誤チェックに利用。
*/
var hash__page_correct_mirror_setting = {
'/j/aaa/bbb.html' : '/e/aaa/bbb_en.html',
'/j/ccc/ddd.html' : '/e/ccc/ddd.html'
'/e/aaa/bbb_en.html' : '/j/aaa/bbb.html',
'/e/ccc/ddd.html' : '/j/ccc/ddd.html'
}
var count__check = 0;
var count__check_ok = 0;
var count__check_ng = 0;
var count__fail = 0;
arr__url_target.forEach(function(elem,index){
$.get(
elem
)
.done(function( data ){
var url__mirror = $(data).find([対象の日英リンクのaタグのセレクタを指定]).attr("href");
var url__correct_mirror = hash__page_correct_mirror_setting[elem];
var str__check_result = "";
if ( url__mirror === url__correct_mirror ){
str__check_result = "OK";
count__check_ok++;
}
else {
str__check_result = "NG";
count__check_ng++;
}
$("#result").append(
`<tr class="${str__check_result}">
<td>${elem}</td>
<td>${url__mirror}</td>
<td>${url__correct_mirror}</td>
<td>${str__check_result}</td>
</tr>`
);
count__check++;
$("#progress").text(`進捗 : 全${arr__url_target.length}件中 ${count__check}件完了（OK : ${count__check_ok} / NG : ${count__check_ng} / 読込エラー : ${count__fail}）`);
})
.fail(function(){
var url__correct_mirror = hash__page_correct_mirror_setting[elem];
$("#result").append(
`<tr class="fail">
<td>${elem}</td>
<td>---</td>
<td>${url__correct_mirror}</td>
<td>読込エラー</td>
</tr>`
);
count__check++;
count__fail++;
$("#progress").text(`進捗 : 全${arr__url_target.length}件中 ${count__check}件完了（OK : ${count__check_ok} / NG : ${count__check_ng} / 読込エラー : ${count__fail}）`);
})
.always(function(){});
})
$('.show-all-reslut').on('click', function(){
$("#result tr").removeClass('hidden');
});
$('.show-ok-reslut-only').on('click', function(){
$("#result tr.NG,#result tr.fail").addClass('hidden');
$("#result tr.OK").removeClass('hidden');
});
$('.show-ng-reslut-only').on('click', function(){
$("#result tr.NG").removeClass('hidden');
$("#result tr.OK,#result tr.fail").addClass('hidden');
});
$('.show-fail-reslut-only').on('click', function(){
$("#result tr.fail").removeClass('hidden');
$("#result tr.OK,#result tr.NG").addClass('hidden');
});
});
</script>
</html>
$.getでページの全ソースを読み込むと、ソースに記載の画像なんかも読み込んでしまうようなので、load()の方がいいのかもしれない。
（23/02/27 追記）
Chromeだと上手く動かないようです。FIreFoxで意図した動作となります。