JavaScriptで文字列のHTMLを除去する方法

javascript

はじめに

RSSで情報を取得するなど外部のAPIを使用してデータを取得する場合、取得した文字列にHTMLが含まれている場合があります
その取得した文字列を自サイトに表示する場合、HTMLが邪魔になることがあります
弊社ではAngularを使用していますが、HTMLタグが含まれた文字列を表示しようとすると、そのまま表示されます

<p>文字列から<strong>HTMLタグ</strong>を除去したい</p>

Angularを使用するとHTMLエンティティに変換され、下記のように自動で変換されます

&lt;p&gt;文字列から&lt;strong&gt;HTMLタグ&lt;/strong&gt;を除去したい&lt;/p&gt;

もちろん取得した文字列をinnerHTMLとしてそのまま表示することもできますが、セキュリティ上の問題や、意図しないタグが含まれるのでデザイン上の問題もあり避けたいところです

下記のように文字列からHTMLタグを除去する方法をご紹介します

文字列からHTMLタグを除去したい

innerTextを使う方法

適当なエレメント(今回はdiv)を作成し、divのinnerHTMLに対象の文字列を指定し、divのinnerTextを取得すれば簡単に文字列からHTMLタグを除去することができます

var src = '<p>文字列から<strong>HTMLタグ</strong>を除去したい</p>';
var div = document.createElement('div');
div.innerHTML = src;
var dist = div.innerText; // 文字列からHTMLタグを除去したい

おわりに

正攻法は正規表現でHTMLを除去するのでしょうが、この方法を使用すれば手軽に文字列からHTMLタグを除去することができます

タイトルとURLをコピーしました