HTMLのエスケープ用関数

20-04-07 20-04-07

関数調整(字数削減)
記事再編
記事公開

HTMLのエスケープをするjavascript用関数です。　別件で入用だったので作成しました。

source code

関数

Javascript


        
	function htmlEsc(str){
		if( typeof str != 'string' ) return false;
		return str.replace(/[&<>'"`]/g,s=>'&#'+s.charCodeAt(0)+';');
	}

呼び出し

htmlEsc(str)

→例：htmlEsc('<a href="http://">link</a>')

引数

`str`

ここで指定した文字列がエスケープされます。
string型で指定

戻り値

string型

それぞれ下記の変換をされて戻ってきます。

`&`	→	`&`
`<`	→	`<`
`>`	→	`>`
`'`	→	`'`
`"`	→	`"`
`	→	```

おまけ

Javascript


        
	function htmlEsc(str){
		if( typeof str != 'string' ) return false;
		var esc = {
			'&':'&#38;',
			'<':'&#60;',
			'>':'&#62;',
			"'":'&#39;',
			'"':'&#34;',
			'`':'&#96;'
		}
		return str.replace(/[&<>'"`]/g,s=>esc[s]);
	}

記述量は増えるがこっちの方が処理は速い。あと編集で数値文字参照から名前文字参照にできる。

そもそもエスケープとは？

エスケープ文字-Wikipedia

かなーり雑に言うなら、その言語上で意味を持ってしまう文字を意味を持たないただの文字として扱うための処理です。

HTMLだと<element>形式で記述をする為、<>間の記述は全てHTMLタグ扱いされます。(ブラウザ解釈で差異有)

それだとwebページ上の文章に<>の記号が使えなくて困りますよね。

という訳でそれらの意味を持つ文字を「ただの文字」として表示したい際の為に行うのがエスケープです。

上記関数だとHTML上で意味を持つ記号を全て数値文字参照に変換することでエスケープしています。