HTML文字列をエスケープ

HTML文字列をエスケープするには次の方法で可能です。

関数定義

/**
 * HTML文字列をエスケープ
 * @param {string} convertString エスケープ元のHTML文字列
 * @return {string} エスケープされたHTML文字列を返す
 */
var escapeHtml = function(convertString) {
	if (typeof convertString !== 'string') return convertString;

	var patterns = {
		'<'  : '&lt;',
		'>'  : '&gt;',
		'&'  : '&amp;',
		'"'  : '&quot;',
		'\'' : '&#x27;',
		'`'  : '&#x60;'
	};

	return convertString.replace(/[<>&"'`]/g, function(match) {
		return patterns[match];
	});
};

簡単な解説

HTMLのうち<、>、&、"、'、`を文字実体参照または数値文字参照へ変換します。
HTML文字列から、対象のパターンに一致した文字を置換するような処理になっています。

使い方

var result = escapeHtml( convertString );

引数

引数名		型	説明
第一引数必須	convertString	string	変換したいHTML文字列

戻り値

エスケープされた文字列を返します。

サンプルコード

var htmlStr = '<div id="sample"><p class="text">foo<br><a href="https://example.co.jp/?k1=v1&k2=v2" target="_blank">bar</a></p></div>';

var result = escapeHtml(htmlStr);

alert(result); // &lt;div id=&quot;sample&quot;&gt;&lt;p class=&quot;text&quot;&gt;foo&lt;br&gt;&lt;a href=&quot;https://example.co.jp/?k1=v1&amp;k2=v2&quot; target=&quot;_blank&quot;&gt;bar&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;

JavaScript逆引きリファレンス一覧へ戻る