<img usemap不能得到outHTML,如何對标簽操作

HTML代碼:

<div id="img01" class="x-hide-display">
      <map id="jfreechart-5656490627055919439.png" name="jfreechart-5656490627055919439.png">
<area shape="poly" coords="522,269,525,275,519,275,519,275" title="(xxx費用, xxxx年) = 44,368,022.12" alt="" nohref="nohref"/>
<area shape="poly" coords="525,542,525,544,522,545,520,544,519,542,520,540,522,539,525,540,525,542,525,542" title="(xxx總費用, xxxx年) = 677,419.99" alt="" nohref="nohref"/>
<area shape="poly" coords="519,265,525,265,525,271,519,271,519,265,519,265" title="(總費用, xxxx年) = 45,045,442.11" alt="" nohref="nohref"/>
<area shape="poly" coords="343,69,346,75,340,75,340,75" title="(xxxxx總費用, 2011年) = 76,801,537.89" alt="" nohref="nohref"/>
<area shape="poly" coords="346,535,345,537,343,538,341,537,340,535,341,533,343,532,345,533,346,535,346,535" title="(xxx總費用, xxxx年) = 1,849,360.877" alt="" nohref="nohref"/>

<area shape="poly" coords="340,58,346,58,346,64,340,64,340,58,340,58" title="(總費用, xxxx年) = 78,650,898.767" alt="" nohref="nohref"/>
<area shape="poly" coords="164,492,167,498,161,498,161,498" title="(xxx總費用, 2010年) = 8,237,826.64" alt="" nohref="nohref"/>
<area shape="poly" coords="167,544,166,546,164,547,162,546,161,544,162,542,164,541,166,542,167,544,167,544" title="(xx總費用, xxxx年) = 341,959.202" alt="" nohref="nohref"/>
<area shape="poly" coords="161,490,167,490,167,496,161,496,161,490,161,490" title="(總費用, xxxx年) = 8,579,785.842" alt="" nohref="nohref"/>
</map>

                      <img class="changeOutHTML"  src="/servlet/DisplayChart?filename=jfreechart-5656490627055919439.png" width="600" height="600" border=0 usemap="#jfreechart-5656490627055919439.png">   

    </div>      

問題:如何在<img>标簽的前後加上<center></center>包裹

第一個想到的方法就是outHTML嘛,這個一定行,但是我在FF上嘗試去得到,但傳回的都是undefined,(IE上沒有測試過),就算可以那也不相容FF,是以沒有測試

下面是如何解決這個問題的:

這個就是完成居中的代碼:

var imgs=document.getElementsByTagName('div');
    var imgsFilters=new Array();
    for(var i=0;i<imgs.length;i++){
      if(/^img/.test(imgs[i].id)){
        imgsFilters.push(imgs[i]);
      }
    }
    //循環替換
    for(var i=0;i<imgsFilters.length;i++){
      var tag=imgsFilters[i].innerHTML.replace(/(\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029))/g, ""); 
      var patt = new RegExp("<img.*>","g");
      var result=patt.exec(tag);
            tag=tag.replace(result,"<center>"+result+"</center>");
            imgsFilters[i].innerHTML=tag;
    }      

對代碼的解釋:

    var imgs=document.getElementsByTagName('div'); //得到所有的div

    var imgsFilters=new Array();//存儲過濾後需要操作的div,所有需要操作的div的id字首都是以img開頭的

        for(var i=0;i<imgs.length;i++){

            if(/^img/.test(imgs[i].id)){//使用正則比對開頭符合過則的div,傳回true則添加到需要操作的集合中,false不做任何操作

                imgsFilters.push(imgs[i]);

            }

        }

下面這個循環很重要:

//循環替換标簽内容

        for(var i=0;i<imgsFilters.length;i++){//循環需要操作的div數組

           //大家在想為什麼需要這行,這行代碼out.write("\t\t\tbackground:red !important;\r\n");我相信大家很熟悉,是JSP編譯之後生成的Java檔案,在一行的結尾會有\r\n,在正則比對    的時候如果有換行,寫這個則會比較麻煩,是以先将所有的換行全部替換

            var tag=imgsFilters[i].innerHTML.replace(/(\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029))/g, "");

          //比對以"<img" 開頭一直到該img的反标簽結束 ">" 的字元串傳回

            var patt = new RegExp("<img.*>","g");

            var result=patt.exec(tag);//傳回比對到的"<img開頭直到該img 的反标簽">"的字元串

           //對其進行替換,在這裡一定會有人說聲明什麼變量啊,"patt.exec(tag);"直接寫兩次不就結了,這樣寫會出問題,因為patt.exec(tag);傳回的對象還帶有一個屬​

​result.lastIndex​

​,因為我上面寫的是全局比對,patt.exec(tag)會根據你調用的次數,而且存在多個可以比對字元串,那麼會依次傳回,那麼第一次比對完後,下一次開始比對的起始點就是上一次比對lastIndex,如果調用兩次,那麼在我目前的這種情況下,會傳回null,替換也會失敗.

            tag=tag.replace(result,"<center>"+result+"</center>");

       //将替換後的字元串指派給div