いじっているシステムでこのような対応が必要だったのでその備忘録
事前知識
HTML特殊文字
HTMLタグ(< や >)を文字列として識別させたいときに<などHTML特殊文字を使用します
https://html.spec.whatwg.org/multipage/syntax.html#escapingString
簡単な例
<!-- 普通のHTMLマークアップ -->
<h1>本日は晴天</h1>
<!-- HTML特殊文字 -->
<h1>本日は晴天</h1>
実践
DOMParserでHTML特殊文字化された文字列を読み込む
const parser = new DOMParser();
const stringContainingHTMLSource = "<h1>本日は晴天</h1>";
const doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
DOMに埋め込んでHTML表示させる
DOM要素を取得して置き換え
const contents = document.getElementById("contents");
contents.innerHTML = doc.body.innerText;
ちなみにdoc.body.innerTextの出力は<h1>本日は晴天</h1>
doc.body.innerHTMLの出力は<h1>本日は晴天</h1>となります
contents.innerHTML に doc.body.innerHTML入れようとしてハマってた...
完成形
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="contents"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
index.js
const parser = new DOMParser();
const stringContainingHTMLSource = "<h1>本日は晴天</h1>";
const doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
const contents = document.getElementById("contents");
contents.innerHTML = doc.body.innerText;