FirefoxとChromeの編集可能なDivの違い

前回、一行目からタイトルを取り出す処理を実装してみたものの、Firefoxではうまく動いても、Chromeだとなぜかうまくいかない事態に直面しました。これがブラウザツールの面倒なところです。

ちなみに、textLineのカードは、<textarea>ではなく、編集可能な<div>を使っています。contenteditable属性を指定したdIvですね。

<div contenteditable=true>
   このDivの中身は編集できるよ。
</div>

jQueryならattrから指定もできます。

$('#hogehoge').attr('contenteditable',true)

で、このdivの中身がどうなっているのかを確認してみました。

まずはFirefox。Macならoption+commant+cで「インスペクター」が起動するので、それで中身をチェック。

<br>で改行されていますね。では、Chromeではというと、

オーマイガッ！貴様ら、divの中身が違うじゃないか。そりゃうまくいかないはずです。

前に書いたコードでは、<br>を改行の印として使っていましたが、chromeも視野に入れると、それだけでは足りません。他のブラウザのこともあるでしょうが、とりあえずは<div>も印に加えることでChrome対策にはなりそうです。

function getTitle(html){
   var t  = html.split(/<br>|<div>/);

   if (t.length > 1){
       title = t[0].replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'')
	t.shift(); 
   }else{
	title = ""
   }
	
   body = t.join("<br>");
   return {"title":title,"body":body};
}

この場合、改行以外の目的で追加されたdivがあるとややこしくなりそうですが、現状の入力状態だとそこまで心配する必要はなさそうですね。

で、後半<br>で配列を結合したものは、Chromeでも意図通りに表示されます。まあ、<br>を入れているのですから当然ではあるでしょう。

これでとりあえず二つのモダンなブラウザには対応できました。safariはまあ、後から考えることにしましょう。