リッチテキスト → プレーン変換

リッチテキストの罠に注意

リッチテキストは、WordやGoogleドキュメント、メールなどからコピーした際に便利ですが、見えないHTMLタグやスタイルが裏側に多く潜んでいます。
これらはWebサイトやCMSにそのまま貼り付けると、不要な<span>やstyle属性が混入し、レイアウト崩れやパフォーマンスの低下、編集のしにくさを引き起こす原因になります。
そのため、まずは純粋なプレーンテキストに変換してから取り扱うのが基本です。

HTMLタグの混入を避けるために

コピー＆ペーストによって持ち込まれる<b>や<i>、<font>といったタグは、HTML構造を壊すだけでなく、意図しない装飾や文字化けを発生させることがあります。
とくにWordPressやWYSIWYGエディタでは、タグの自動補完により、コードが複雑化してしまうこともあります。
プレーンテキストに変換することで、こうしたリスクを回避し、クリーンなマークアップが可能になります。

SEOとクリーンテキストの関係

SEOの観点からも、余計なインラインスタイルや装飾タグが残っていると、クローラーの解析を妨げる原因になります。
とくに本文中に含まれるstyle="display:none;"などの不要な属性は、スパムとみなされる可能性があるため注意が必要です。
リッチテキストを一度プレーンに変換し、構造化されたHTMLを意識的に組み直すことで、コンテンツの価値を正しく伝えることができます。

制作現場で役立つ変換のタイミング

Web制作の現場では、クライアントからWordやExcel形式で原稿が届くケースが多くあります。
こうした文書からテキストを抜き出す際に、まずリッチな装飾をすべて除去し、プレーンテキスト化することで、マークアップやスタイリングの整合性を保つことができます。
結果として、コーディング工程の効率化や保守性の向上にもつながります。

複数環境での表示を意識する

リッチテキストは環境依存性が高く、ブラウザやOS、エディタによって表示結果が異なる場合があります。
それに対して、プレーンテキストは装飾を含まないため、あらゆる環境で安定した表示が可能です。
特にメールマガジンやRSS配信、フォーム入力など、文字データの正確性が求められるシーンでは、プレーンテキストの使用が推奨されます。

ページが読み込まれたらすぐに変換処理を行います。

document.addEventListener('DOMContentLoaded', function() {
	convertText();
});

DOMContentLoadedは「HTMLの読み込みが終わったらすぐ実行してね」という命令です。

まず、HTMLを一時的にDOM要素に変換して、見た目の構造を保ちつつ中身だけ取り出します。

const tempDiv = document.createElement('div');
tempDiv.innerHTML = input;

こうすることで、正規表現でゴリ押しするよりも安全にHTMLタグを扱えます。

<p>や<li>、<br>など、表示に影響するタグには、それぞれ適切な改行や記号をつけて整形します。

if (element.tagName === 'LI') {
	element.outerHTML = '• ' + element.textContent + '\n';
}

リスト項目には先頭に「•（黒丸）」をつけて分かりやすく、段落や見出しには改行を挿入して文章の流れを壊さないようにしています。

 や&などの文字実体参照を、人間が読める文字に戻します。

entityDiv.innerHTML = plainText;
plainText = entityDiv.textContent;

一度div.innerHTMLに代入してからtextContentを取り出すことで、HTMLエンティティが自動的に変換されます。

変換後のテキストをスッキリ見せるために、無駄なスペースや改行をまとめます。

plainText = plainText .replace(/[ \t]+/g, ' ') .replace(/\n\s+/g, '\n') .replace(/\n{3,}/g, '\n\n') .trim();

特に連続改行や、行頭の空白は読みづらさの原因になるため、ここで一気に掃除します。

最終的にきれいに整えたテキストは、<pre>タグの中に表示されます。

output.textContent = plainText;