はてなブログのタイトルに JavaScript で文字数を表示する
from 2022/05
はてなブログのタイトルに JavaScript で文字数を表示する
369文字
html<header class="entry-header">
<div class="date entry-date first">
<a href="https://kejinan.hatenadiary.com/archive/2022/05/07" rel="nofollow">
<time datetime="2022-05-07T09:15:50Z" title="2022-05-07T09:15:50Z">
<span class="date-year">2022</span><span class="hyphen">-</span><span class="date-month">05</span><span class="hyphen">-</span><span class="date-day">07</span>
</time>
</a>
</div>
<h1 class="entry-title entry-title-empty">369文字</h1>
</header>記事に題名がないないときに h1 に
entry-title-empty という Class が設定される題名があるとき
html<h1 class="entry-title">
<a href="https://kejinan.hatenadiary.com/entry/2022/05/01/010207" class="entry-title-link bookmark">ファイアーエムブレム風花雪月</a>
</h1>題名がないとき
html<h1 class="entry-title entry-title-empty">
<a href="https://copyanddestroy.hatenablog.com/entry/2015/12/28/000000" class="entry-title-link bookmark">■</a>
</h1>コードは、
js[].forEach.call(
document.querySelectorAll('article'),
(a) => {
var c = 0;
[].forEach.call(
a.querySelectorAll('p'),
(p) => c += p.textContent.length
);
console.log(c);
var h = a.querySelector('h1.entry-title.entry-title-empty');
if (h) h.textContent = `${c}文字`
}
); call とか => とか、知らん let じゃなくて var なのはスコープの問題? → let でも動いたわこっちの方が、思っている文字数と一致する
js [].forEach.call(
document.querySelectorAll('article'),
(a) => {
let c = 0;
[].forEach.call(
a.querySelectorAll('.entry-content p'),
(p) => c += p.textContent.length
);
console.log(c);
var h = a.querySelector('h1.entry-title.entry-title-empty a');
if (h) h.textContent = `${c}文字`
}
);開発者向けの設定について - はてなブログ ヘルプ https://help.hatenablog.com/entry/developer-option
はてなブログダッシュボード＞設定＞詳細設定タブ＞headに要素を追加
<head>要素にメタデータを追加