<title>タグの中身を書き換えたい

Question

こちらのブログのテンプレートを編集しています。
ブログリンク先

##取り組んでいること
記事の本文やタイトルにふりがなを振ることが多く、ふりがなを適用したい場所にclassを付与して以下のjavascriptを動かしています。

 $(".story").each(function() {
 $(this).html(
 $(this).html()
 /* 半角または全角の縦棒以降の文字をベーステキスト、括弧内の文字をルビテキストとします。 */
 .replace(/[\|｜](.+?)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>')
 .replace(/[\|｜](.+?)（(.+?)）/g, '<ruby>$1<rt>$2</rt></ruby>')
 .replace(/[\|｜](.+?)((.+?))/g, '<ruby>$1<rt>$2</rt></ruby>')
 /* 漢字の連続の後に括弧が存在した場合、一連の漢字をベーステキスト、括弧内の文字をルビテキストとします。 */
 .replace(/([一-龠]+)《(.+?)》/g, '<ruby>$1<rt>$2</rt></ruby>')
 /* ただし丸括弧内の文字はひらがなかカタカナのみを指定できます。 */
 .replace(/([一-龠]+)（([ぁ-んァ-ヶ]+?)）/g, '<ruby>$1<rt>$2</rt></ruby>')
 .replace(/([一-龠]+)(([ぁ-んァ-ヶ]+?))/g, '<ruby>$1<rt>$2</rt></ruby>')
 /* 括弧を括弧のまま表示したい場合は、括弧の直前に縦棒を入力します。 */
 .replace(/[\|｜]《(.+?)》/g, '《$1》')
 .replace(/[\|｜]（(.+?)）/g, '（$1）')
 .replace(/[\|｜]((.+?))/g, '($1)')
 );
 });

ここは｜概要《あらすじ》です　のように書いたとき、【概要】の上に【あらすじ】とふりがなが振られています。

##現況
この方法を使って、

1. 記事一覧ページのタイトル、概要（本文部分を使用）
2. リンククリックして入った個別記事部分のタイトル、本文（追記部分を使用）
3. 個別記事部分の下部に表示される【前の記事を読む】、【次の記事を読む】のリンク部分

にふりがなを適用することができました。

個別記事のサンプル

##改善したいこと
個別ページにアクセスした際、タブ型のブラウザ等で見ると、タブに出るページのタイトルがそのまま【ここは｜表題《タイトル》です】となってしまっています。

これを、【ここは表題です】というように、ルビのない形で表示させたいのです。

##やってみたこと

1. 他の箇所と同じように<title>タグを<div class="story"><div>ではさんでみる

→タブのタイトル自体が【ここは<ruby>表題<rt>タイトル</rt></ruby>です】になる（タグがそのままテキスト化されて表示）

1. タイトルに 【ここは<ruby>表題<rt>タイトル</rt></ruby>です】のように直接タグ記述してみる

→タブ、記事タイトルともに【ここは表題タイトルです】になる

以上のような結果となり、うまくいきませんでした。

##ヒント？
表示されたページにて、ふりがなのついた部分をドラッグ選択してコピー→メモ帳等に貼り付けると、【ここは表題です】が取得できます。プレーンテキスト化されていると推測します。
この結果をうまくタブに反映できれば、まさに求めている結果になるのですが・・・。

お忙しい中恐れ入りますが、お知恵をお貸しいただければ幸いです。どうぞよろしくお願いいたします。

Comments

[maisumakun]

元のHTMLには、<title>ここは｜表題《タイトル》です</title>と書いてある、ということで間違いないですか？

[LUCIA]

ソースを覗いてみました。
<title>ここは｜表題《タイトル》です - 太陽と月の庭:ある家族のサロン</title>（-以降はブログ名です）となっています。
他のページも同じで、この形で書かれているものがjavascriptでルビ付きに変換され表示されているだけで、もとは間違いなく普通のテキストです。

[LUCIA]

この方法を使って、解決しました！
<script>

var title = $("title").text();
var result = title.replace(/[\|｜](.+?)《(.+?)》/g, '$1')

$("title").text(result);　ここまででタイトルのルビ削除

ここからは個別で設定したい場合
$(function(){
$('.delruby').each(function(){
var txt = $(this).html();
$(this).html(
txt.replace(/[\|｜](.+?)《(.+?)》/g, '$1')
);
});
});

</script>

アドバイス有難うございました！

本当はtwitterカードの表示も変えてみようと思ったのですが、いい案が見つかりませんでした・・・！

Answer 1

Head内の<title>を書き換えたいということだと解釈しました。

document.title=document.title.replace(/｜/g, '').replace(/《(.*?)》/g, ''));

正規表現はあまり得意でないのでもっとスマートな書き方があるかと思います。

Comments

[LUCIA]

この方法を使って、解決しました！
<script>

var title = $("title").text();
var result = title.replace(/[\|｜](.+?)《(.+?)》/g, '$1')

$("title").text(result);　ここまででタイトルのルビ削除

ここからは個別で設定したい場合
$(function(){
$('.delruby').each(function(){
var txt = $(this).html();
$(this).html(
txt.replace(/[\|｜](.+?)《(.+?)》/g, '$1')
);
});
});

</script>

アドバイス有難うございました！

本当はtwitterカードの表示も変えてみようと思ったのですが、いい案が見つかりませんでした・・・！

Answer 2

（質問を読み間違えていたので修正）

単純に.replace(/[\|｜](.+?)《(.+?)》/g, '$1')などとすればいいのでは？
（このコードでは全置換すると思うので「<title>タグの中だけ」という正規表現設定が必要そうですが）

Comments

[maisumakun]

やりたいことは、「【ここは表題です】というように、ルビのない形で表示させたい」とのことですが。

[sakura_hana]

コメントありがとうございます。質問を読み間違えていたので修正しました。

[LUCIA]

この方法を使って、解決しました！
<script>

var title = $("title").text();
var result = title.replace(/[\|｜](.+?)《(.+?)》/g, '$1')

$("title").text(result);　ここまででタイトルのルビ削除

ここからは個別で設定したい場合
$(function(){
$('.delruby').each(function(){
var txt = $(this).html();
$(this).html(
txt.replace(/[\|｜](.+?)《(.+?)》/g, '$1')
);
});
});

</script>

アドバイス有難うございました！

本当はtwitterカードの表示も変えてみようと思ったのですが、いい案が見つかりませんでした・・・！