数ヶ月前にQAエンジニアから開発エンジニアに転身したので、最近はコード読み書きしてます。
今日は珍しく、IE で意図したとおりに動くのに Firefox で動かない、という JavaScript の現象に遭遇。
以下のようなHTMLがあるのに対し
<td id="hoge1"> <div> <div></div> <span> <input name="title_name" value="【ほげ】もげ" type="hidden">【ほげ】もげ </span> </div> </td>
以下のような jQuery を使った JavaScipt で TD 内のテキストが【ほげ】で始まるかどうか判定しようとすると
var isThisHoge = $("#hoge1").filter(function() { return /^【ほげ】/.test($(this).text()); }); if (isThisHoge.length) { // この場合の処理 }
Firefox などの場合、text() で返される文字列の前後に改行などが入ってしまい、期待する文字列(【ほげ】)が先頭に来ないという状態になりました。
なので、以下のようにしてあらかじめ先頭の改行・空白等を除去してやればOKでした。
var isThisHoge = $("#hoge1").filter(function() { var titleText = $(this).text().replace(/^\s+/, ''); return /^【ほげ】/.test(titleText); }); if (isThisHoge.length) { // この場合の処理 }
.text() が、エレメント内のテキストすべてを返すということを考えれば、IEで動いたのはむしろたまたまで、必ず空白除去するようにするのが筋なのかも。
ちなみに、.replace() が置換後の文字列を返すというのを忘れて、なんで置換されないのだろう。。。とかなりの時間悩んだことは秘密です。。