HTMLを指定文字数で切り詰めて表示する

前の記事「記事の先頭にアイコンを挿入する方法」の最後で、記事の文字数を切り詰める方法を簡単に書きました。この記事では、その部分だけ詳しく説明します。

普通に、文章を指定文字数で切り詰めるなら次のようにすれば実現できます。

function hoge(str,len){
	return str.length>len?str.slice(0,len)+'…':str;
}

第１引数strには文字列、第2引数lenに切り詰めたい長さを指定します。lenより長ければ、len文字で切り詰め、その後に「…」を加えます。ただしマルチバイト文字列の場合、どの文章も同じ文字数で切られない可能性があります。その場合は文字数ではなく、バイト数で切られていると思います。

HTMLの文章切り詰め

HTMLの場合はタグを消去しないと表示が崩れる可能性があります。文字列を切り詰めた結果、終了タグがなくなってしまったり、タグの途中で切れてしまったりするからです。

そこで、文字を切り詰める前にHTMLタグを正規表現で消去します。

str.replace(/\<script.*?\>.*?(\<\/script\>)|\<style.*?\>.*?(\<\/style\>)|\<.+?\>/g,'');

<と>のエスケープは正規表現自体には必要ないかもしれませんが、JavaScriptをHTML内に書いた場合にトラブらないようにエスケープしておきました。たとえば、よくdocument.write(‘<scr’+’ipt’というような記述をしますが、これはdocument.write(‘\<script’でも大丈夫です。

HTMLに対応した修正版

function hoge(str,len){
	str=str.replace(/\<script.*?\>.*?(\<\/script\>)|\<style.*?\>.*?(\<\/style\>)|\<.+?\>/g,'');
	return str.length>len?str.slice(0,len)+'…':str;
}