jQueryで<p>&nbsp;</p>を消す

hatenaロゴ

勉強がてら、いろいろなはてなブログを見ているのですが、文章と文章の間の大きな余白が気になってしょうがない。

はてなでブログを書くとわかるのですが、見たまま編集でエンターキーで文章の間に余白をつくると、HTML編集では「<p> </p>(<p>&nbsp;</p>)」となっています。

そこで、Webサイトの見た目を変更するchrome拡張機能User JavaScript and CSSに次のコードを入力して他のブログの文章間の余白を消して見やすくすることにしました。

JavaScript
/* <p> </p>の空白(&nbsp;)を消す */
$('p').each(function() {
    var txt = $(this).html();
    $(this).html(txt.replace(/&nbsp;/g,''));
});

/* <p></p>(空のpタグ)を消す */
$('p:empty').remove();

参考になるブログ・Webサイト
Stronghold Archive - jQuery 特定文字列や特定要素の削除及び置換方法
メシのタネ - jQuery ドキュメント全体から特定の文字列を取得して置換

今はどうかわかりませんが、ひと昔前の芸能人のブログのように、無駄に改行が多いブログの連続したbrタグも消そうと試みましたが、全然できませんでした。→できました。

JavaScript
/* brタグを消す */
$(document.body).each(function() {
    var txt = $(this).html();
    $(this).html(txt.replace(/(<br>\s*)+/ig,'<br />'));
});

参考になるブログ・Webサイト
jomalog - 連続したbrタグを除去して改行の多いブログを見やすくするブックマークレット