JavaScript で文字列を HTML に変換する
-
innerHTMLプロパティを使用して文字列を HTML オブジェクトに変換する -
DOMParser()インターフェイスを使用して、文字列を HTML オブジェクトに変換する -
HTML で
jQueryを使用して渡される文字列のタイプを確認する
JavaScript では、いくつかの特定の規則により、開発履歴全体が統合されるための一歩先を行っています。同様に、文字列を（HTML 要素の寄付パターンの形式で）アドレス指定し、後でそれを一意のオブジェクトとして HTML 本体に渡す非静的な方法の 1つ。
これにより、インターフェイスが動的になり、他の方法では呼び出すのが困難だった多くの問題を解決できます。
次のコンテンツのコード例は、この変換を実装する方法を示しています。まず、innerHTML プロパティを使用して文字列を渡します。
次の例では、DOM parse メソッドを使用します。この規則は、多くのブラウザへの受け入れに問題があるため、ほとんど推奨されていません。
最後のセクションでは、渡した文字列が HTML オブジェクトなのか、それとも単なる文字列なのかを調べます。飛び込みましょう！
innerHTML プロパティを使用して文字列を HTML オブジェクトに変換する
ここでは、生の文字列をパラメータとして受け取る関数 stringToHTML があります。その後、div を作成し、その中に指定された文字列を渡します。
代わりに HTML 本体に渡すこともできますが、きちんとするには、div 要素が必要です。
次に、新しく作成された div がインスタンス dom に関連付けられます（おそらく）。したがって、dom の場合、innerHTML プロパティを設定してから文字列を渡します。
return は、作成した関数 stringToHTML の dom インスタンスになります。コード行を確認してみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="abc.js"></script>
</body>
</html>
var stringToHTML = function(str) {
var dom = document.createElement('div');
dom.innerHTML = str;
return dom;
};
console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
出力：
DOMParser() インターフェイスを使用して、文字列を HTML オブジェクトに変換する
DOMParser() はしばしば無視されるか、条件と一緒に使用できます。問題を処理する以前の方法が消滅した場合、このコードセグメントが起動してプロセスをバックアップする可能性があります。
したがって、ここでは、DOMParser() インターフェイスのインスタンスを取得し、インスタンスは parseFromString() によってトリガーされます。パラメータは、文字列とそれが表すことになっている HTML のタイプになります。
次に、インスタンス doc を HTML 本体に渡します。
コードスニペット：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="2.js"></script>
</body>
</html>
var stringToHTML = function(str) {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
return doc.body;
};
console.log(
stringToHTML('<h1>Hello world!</h1><p>I am fine Thank you! ^_^</p>'));
出力：
-Interface-to-Convert-String-to-HTML-Object.webp)
HTML で jQuery を使用して渡される文字列のタイプを確認する
このセクションでは、全体的なタスクを決定します。HTML オブジェクトが作成されたかどうか、タイプなどを確認します。
jQuery を使用して文字列を渡すことができる場合、それはオブジェクト形式で HTML に送られます。コンテンツはプレビューされていませんが、HTML 本文にスペースが作成されています（永続的ではありません）。
それでは、コードブロックにジャンプしましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="3.js"></script>
<script>
var stringToHTML = function (str) {
var d = $(str);
return d;
}
console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
</script>
</body>
</html>
出力：
