jQuery の .text() で取得した文字列で文字マッチする場合の注意

数ヶ月前に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() が置換後の文字列を返すというのを忘れて、なんで置換されないのだろう。。。とかなりの時間悩んだことは秘密です。。