ルビつきの文章からルビを削除してコピペする

この記事について
1. つまずきポイント要約
2. Related posts:

この記事について

環境	javascript（IE11含む）
目的	ルビ付きの文章からルビなしのテキストをコピーする
結果	rtタグの中身を一時的に空にして選択テキストを取得し、後で戻す方式にした

つまずきポイント要約

display:none でルビを消す方法は、IE11では選択テキストにルビが残ってしまう

ルビだけコピーしたくない

上のページを参考にルビつきの文章を選択してボタンを押すとアラートでルビなしの選択テキストが表示されるスクリプトを書いたのでメモ。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>a</title>
</head>
<body>
  <section>
    <h2>おはなし</h2>
    <p>
      <ruby><rb>親譲</rb><rp>（</rp><rt>おやゆず</rt><rp>）</rp></ruby>りの<ruby><rb>無鉄砲</rb><rp>（</rp><rt>むてっぽう</rt><rp>）</rp></ruby>で小供の時から損ばかりしている。
    </p>
  </section>
<div id="foot_bt">
ルビなし文章をアラート
</div>
</body>
</html>

//採用したのはこちら

//いったん削除する
var rtList = document.getElementsByTagName("rt");
var contentList = [];
Array.prototype.forEach.call(rtList, function(rt) {
	contentList.push(rt.textContent); //配列に入れる
	rt.textContent = ""; //空にする
});

//選択した文章を代入
selection_text = document.getSelection().toString();

//削除したやつを戻す
setTimeout(function() {
	Array.prototype.forEach.call(rtList, function(rt) {
		 rt.textContent = contentList.shift();
	});
}, 0);

最初の参考ページにdisplay:none;でルビを消す方法も載っているが、選択したテキストを取得する場合、IE11ではルビが残ってしまい無理だった。
参考：選択中文字列の取得ブラウザによる違い

このページも役に立った
http://mamewaza.com/support/blog/howto-use-range-selection.html

この記事について

つまずきポイント要約

Related posts: