お蔵入り
innerHTML.replaceがMSIEとFFとで違う挙動を示します
で、Lightbox Plusの実装実験を行っております。
Lightbox Plusの基本実装は問題無く出来ております。
さて、目下Prototype.is(1.4.0)を利用していますが、以下の構文では、Firefox1.5.0.9では機能しているのですが、MSIEでは、置換が出来ていない模様です。
文法ミスがあるのでしょうか？
var blog2007 = document.getElementsByClassName("blog",$("content"));
for(j=0;j<blog2007.length;j++){
// まずはtargetの削除
with(blog2007[j])innerHTML=innerHTML.replace(/(\<a href=\"[^\"]*\.[jpg][pni][gf]\") target=\"\>/ig,"$1>");
with(blog2007[j])innerHTML=innerHTML.replace(/(\<a href=\"[^\"]*\.[jpg][pni][gf]\")([^\>]*)(\><img src=\"[^\"]*\") alt=\" ([^\"]*)\" ([^\>]*)\>/ig,"$1 $2 rel='lightbox1' class='effectable'$3 alt='$4' $5>");
}
MSIE: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0) FF: Mozilla/5.0 (Windows; U; Windows NT 5.0; ja; rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9
PS: MSIE専用処理として、本スクリプトの直後で、
var aTags = blog2007[j].getElementsByTagName("a");
によって、aTags[i].～ に対する代入処理を行っております。これがルール違反なのかも・・・・う～む ^^;回答
コメント(7)
var aTags = blog2007[j].getElementsByTagName("a");
というのはアリなのですか？私は使ったことないのですが・・・。正規表現は、「?」がついてなくて最長マッチになっている可能性はないでしょうか。
質問には関係ないですが、
\.[jpg][pni][gf]
は、
\.(jpg|gif|png)
の方がいいのではないでしょうか。まぁ、ppgとか他の組合せがマッチすることなんてないでしょうけどｗ
//毎度つぶやきレベルですいません。。。
http://wiki.livedoor.jp/mmj_aos/tb.cgi/Lightbox%20...
のLivedoor Wikiで解説中なのですが、Lightbox Plus の実装を、Livedoor、Seesaa、FC2に行っています。
Firefoxでは問題無くreplaceするのですが、同じ構文が、どうやらMSIEだと、エラーにはならないものの、置換されていないようです。正規表現でマッチしていない模様です。
>>#1 アリなのですか？
document.getElementsByClassName("blog",$("content"))[0];
ではなくて、document.getElementsByClassName("blog",$("content"));
なので、こうなりました。</div>でいちいち閉められてしまっている。ブログのINDEXだと、複数のコンテンツが表示される。コンテンツとコンテンツの間に、広告があったりします。.or. の正規表現式の方が、まともですよね。改めます。(^^);
>>#1 正規表現は、「?」がついてなくて最長マッチになっている可能性はないでしょうか。
UNIXのgrepに代表される正規表現からすると、「?」って、何？！って思っていました。
？って、「任意の１文字」のマッチングではなかったのでしょうか？
どこか、「?」に関する解説HPなるURLを知っておられる方はおられませんでしょうか？
>>#3
量指定子の後ろにつける「?」の意味です。難しいものではないので説明しますと、
/a.*a/は、"ababa"に対して、普通は最長マッチなので、
ababaにマッチしますが、
/a.*?a/とすると、最短マッチになって、
abaにマッチします。Perl5由来だっけかな。。。でも、たぶん、原因はそれではない気がします。
target=\"\>
のところと、
alt\"=
の後に空白がちょっとだけ気になります。
ちなみに、#1の「アリ」はそういう意味ではなく、タグオブジェクトのメンバメソッドにgetElementsByTagNameがあるというのを知らなかっただけです。すいません。。。
>>#4 量指定子の後ろにつける「?」の意味です。難しいものではないので説明します
毎度お世話になります。ご指導に感謝致します。
さて、FFで目的を達成し、MSIEでは目的を達成しない改訂後のスクリプトは：
with(blog2007[j])innerHTML=innerHTML.replace(/(\<a href=\"[^\"]*\.[jpg][pni][gf]\")([^\>]*)(\><img src=\"[^\"]*\")(.*)(alt=\" [^\"]*\")([^\>]*)\>/ig,"$1 $2 class='effectable'$3 $4 $5 $6>");
が最新replaceです。^^;
確かに文法ミスがありました。それでもFFで目的を達成したのは、文法ミス以外で機能していたのでしょう。面目ありません。
ただ気になるのは、エンジンが異なると正規表現が変わるとのご指摘でした。★オニキス☆さまのご指摘かと(^^)
http://knowledge.livedoor.com/18489
>>#4 後に空白がちょっとだけ気になり
IMGタグのALT属性の先頭文字が半角空白の場合に、Aタグに
class='effectable'を挿入したいと言う置換です。説明不足で申し訳ない次第です。
- Ujiki.oO -
結局、現在利用中の最新Firefoxが、
http://pics.livedoor.com/u/mmj_aos/2279489
JavaScriptのreplace()で、オプション「 ｇ 」を指定しても、仕様の通りに複数のマッチング置換をせず、１つの置換しか出来ない点を確認しました。
直前にreplaceを追加し、例えば
<a を \n<a に置換することで、正常に機能するようになりました。不恰好ですね。
これでMSIE系で完成した機能の仕様を、Firefoxでも同等に機能を果たせるようになりました。ありがとうございました。
http://wiki.livedoor.jp/mmj_aos/tb.cgi/%A4%C1%A4%E...
- Ujiki.oO -
PS: ★オニキス☆さま、是非アンサー願います。(*^^*)
トラックバック(5)
Lightbox Plus をブログで使ってみる
文字だけでも素晴らしいですけど、やっぱり軽快な画像表現で訴求効果を高めますか。画像をクリックして新しいウィンドーで生成したり、画像だけを表示すると言う落胆も無くなります。訪問者が画像をクリックすることに幸せを感じて、もっとみんなが喜ぶかも (*^^*)/ ...
Lightbox Plus をブログで使ってみる
文字だけでも素晴らしいですけど、やっぱり軽快な画像表現で訴求効果を高めますか。画像をクリックして新しいウィンドーで生成したり、画像だけを表示すると言う落胆も無くなります。訪問者が画像をクリックすることに幸せを感じて、もっとみんなが喜ぶかも (*^^*)/~
Lightbox Plus をブログで使ってみる
文字だけでも素晴らしいですけど、やっぱり軽快な画像表現で訴求効果を高めますか。画像をクリックして新しいウィンドーで生成したり、画像だけを表示すると言う落胆も無くなります。訪問者が画像をクリックすることに幸せを感じて、もっとみんなが喜ぶかも (*^^*)/~
