JavaScriptで文字列からHTMLを除去する

2023-04-22

JavaScriptで文字列からHTMLを除去するには、いくつかの方法があります。以下にいくつかの例を示します。

方法1：正規表現を使用する

正規表現を使用して、HTMLタグを含む文字列からタグを削除することができます。以下は、この方法の例です。

function removeHTMLTags(str) {
	return str.replace(/(<([^>]+)>)/ig,"");
}

// 使用例
const htmlString = "<p>これはHTMLの<p>タグを含む文字列です。</p>";
const removedString = removeHTMLTags(htmlString);
console.log(removedString); // "これはHTMLのタグを含む文字列です。"

上記の例では、replace()メソッドを使用して、文字列内のすべてのHTMLタグを空文字列に置換しています。正規表現/(<([^>]+)>)/igは、HTMLタグを検索するためのパターンです。

方法2：DOMを使用する

DOMを使用して、HTMLタグを含む文字列からタグを削除することもできます。以下は、この方法の例です。

function removeHTMLTags(str) {
	const div = document.createElement("div");
	div.innerHTML = str;
	return div.textContent || div.innerText || "";
}

// 使用例
const htmlString = "<p>これはHTMLの<p>タグを含む文字列です。</p>";
const removedString = removeHTMLTags(htmlString);
console.log(removedString); // "これはHTMLのタグを含む文字列です。"

上記の例では、document.createElement()メソッドを使用して、新しいdiv要素を作成し、そのinnerHTMLプロパティに文字列を設定します。次に、div要素のテキストコンテンツを取得して、HTMLタグを除去しています。

方法3：jQueryを使用する

jQueryを使用して、HTMLタグを含む文字列からタグを削除することもできます。以下は、この方法の例です。

function removeHTMLTags(str) {
	return $("<div>").html(str).text();
}

// 使用例
const htmlString = "<p>これはHTMLの<p>タグを含む文字列です。</p>";
const removedString = removeHTMLTags(htmlString);
console.log(removedString); // "これはHTMLのタグを含む文字列です。"

上記の例では、$("<div>")を使用して新しいdiv要素を作成し、html()メソッドを使用して文字列を設定します。次に、text()メソッドを使用して、div要素のテキストコンテンツを取得して、HTMLタグを除去しています。