javascriptでURIに応じてｸﾗｽを追加したい # 先ほど､補足投稿したときに質問の受付を停止したままでした｡ # 回答しようとしてくださった方々､大変申し訳ありません…

javascriptでURIに応じてｸﾗｽを追加したい

# 先ほど､補足投稿したときに質問の受付を停止したままでした｡
# 回答しようとしてくださった方々､大変申し訳ありませんでした｡
# 質問文と補足を訂正したうえで再度投稿させていただきます｡

htmlは補足のほうに記入します｡

ｻｲﾄ上に
【html1】
が表示されています｡

たとえば現在のｱﾄﾞﾚｽがhttp://www.xxx.com/11b.html?page=123&id=456のとき､javascriptで
【html2】
となるようにしたいのですが､このような動作を行うにはどういうｺｰﾄﾞを追加すればいいのかを教えてください｡
ulやliのidは適当ですので､ulにもidを定めたほうがいいとかいう場合は適当に改変してかまいません｡

ｱﾄﾞﾚｽはｻﾌﾞﾄﾞﾒｲﾝとﾌｧｲﾙ名のみ変わります｡
正規表現でいうところの､次のような形になります｡

http://(.+?).xxx.com/(.+?).html(+ある場合はGETﾊﾟﾗﾒｰﾀ)

私はjavascriptは勉強中で､与えられたｺｰﾄﾞを調べつつ改変する技能はありますが､1から作るには時間がかかりすぎます｡

ですのでこのような動作を行うjavascriptｺｰﾄﾞの模範解答が知りたいです｡

よろしくお願いいたします｡

html1

<body>
<div>
<div>
<ul>
<li id="t1"><a href="http://www.xxx.com/">11</a></li>
<li id="t1"><a href="http://aaa.xxx.com/">22</a></li>
<li id="t1"><a href="http://bbb.xxx.com/">33</a></li>
</ul>
</div>
<div>
<ul>
<li id="t2"><a href="http://www.xxx.com/11a.html">aaa</a></li>
<li id="t2"><a href="http://www.xxx.com/11b.html">bbb</a></li>
<li id="t2"><a href="http://www.xxx.com/11c.html">ccc</a></li>
</ul>
</div>
</div>
</body>

html2

<body>
<div>
<div>
<ul>
<li id="t1"><a class="active" href="http://www.xxx.com/">11</a></li>
<li id="t1"><a href="http://aaa.xxx.com/">22</a></li>
<li id="t1"><a href="http://bbb.xxx.com/">33</a></li>
</ul>
</div>
<div>
<ul>
<li id="t2"><a href="http://www.xxx.com/11a.html">aaa</a></li>
<li id="t2"><a class="active" href="http://www.xxx.com/11b.html">bbb</a></li>
<li id="t2"><a href="http://www.xxx.com/11c.html">ccc</a></li>
</ul>
</div>
</div>
</body>

下記のJavaScriptをお試しください｡
呼び出されたURLはlocation.hrefに格納されます｡
これに対して正規表現によるﾏｯﾁﾝｸﾞを行うことで
html2とhtml1を表示しています｡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
<!--
re = new RegExp("page=123&id=456$", "i");
if (location.href.match(re)) {
document.write("html2");
} else {
document.write("html1");
}
-->
</script>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 <script>
 window.addEventListener('load', init, false);
 function init() {
 var matches = location.href.match(/http:\/\/([^.]+\.xxx\.com)\/([^.]+\.html)/);
 if (matches[1]) {
 var subdomain = matches[1]; //www.xxx.comなどが入る
 //ul.subdomainの子孫のaのうち､hrefにwww.xxx.comなどを含むものをひとつ探す
 document.querySelector('ul.subdomain a[href*="' + subdomain + '"]').classList.add('active');
 }
 if (matches[2]) {
 var filename = matches[2]; //11b.htmlなどが入る
 document.querySelector('ul.filename a[href*="' + filename + '"]').classList.add('active');
 }
 }

 // IE9とかでも動くようにjQuery使った｡
 // $(function(){
 // var matches = location.href.match(/http:\/\/([^.]+\.xxx\.com)\/([^.]+\.html)/);
 // if (matches[1]) {
 // var subdomain = matches[1];
 // $('ul.subdomain a[href*="' + subdomain + '"]').addClass('active');
 // }
 // if (matches[2]) {
 // var filename = matches[2];
 // $('ul.filename a[href*="' + filename + '"]').addClass('active');
 // }
 // });
 </script>
 <style type="text/css">
 .active { font-weight: bold; color: pink;}
 </style>
</head>
<body>
<div>
<div>
<ul class="subdomain">
<li><a href="http://www.xxx.com/">11</a></li>
<li><a href="http://aaa.xxx.com/">22</a></li>
<li><a href="http://bbb.xxx.com/">33</a></li>
</ul>
</div>
<div>
<ul class="filename">
<li><a href="http://www.xxx.com/11a.html">aaa</a></li>
<li><a href="http://www.xxx.com/11b.html">bbb</a></li>
<li><a href="http://www.xxx.com/11c.html">ccc</a></li>
</ul>
</div>
</div>
</body>
</html>

jQuery 使ってます｡単純なｺｰﾄﾞを目指しました｡

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
 var loc = location;

 var pat1 = loc.protocol + "://" + loc.host + "/";
 var pat2 = loc.protocol + "://" + loc.host + loc.pathname;

 $('a[href="' + pat1 + '"]').addClass("active");
 $('a[href="' + pat2 + '"]').addClass("active");
});
</script>
<body>
<div>
<div>
<ul>
<li id="t1"><a href="http://www.xxx.com/">11</a></li>
<li id="t1"><a href="http://aaa.xxx.com/">22</a></li>
<li id="t1"><a href="http://bbb.xxx.com/">33</a></li>
</ul>
</div>
<div>
<ul>
<li id="t2"><a href="http://www.xxx.com/11a.html">aaa</a></li>
<li id="t2"><a href="http://www.xxx.com/11b.html">bbb</a></li>
<li id="t2"><a href="http://www.xxx.com/11c.html">ccc</a></li>
</ul>
</div>
</div>
</body>
</html>

HTML の部分は､質問にあるものをそのまま使いました｡