タグ内のコードを外部テキストノードに解析するブラウザの問題を解決する方法は？

ブラウザはそうします<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>タグ内のコードをテキストノードに解析するための解決策

使用中<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>タグを表示すると、ブラウザはコードの形式を保持するのではなく、コードを外部テキストノードに誤って解析することがあります。この問題は、テキストファイルがバックエンドから読み取られ、コードスニペットがフロントエンドに表示されるシナリオでしばしば発生します。この記事では、問題の原因を分析し、解決策を提供します。

問題現象：

バックエンドからコードテキストを取得し（たとえば、TXTファイルから読み取ります）、次のコードを使用してフロントエンドに表示します。

 $（ "＃article-content"）。html（article_content）;

結果、<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>タグのコードはプレーンテキストに解析され、ラインブレークやスペースなどの形式が失われ、ディスプレイ効果は期待と一致しません。

問題の根源：

問題は、通常、バックエンドによって返されるデータが完全な文字列ではなく、TXTファイルを行ごとに読み取ることによって引き起こされる配列であることです。

解決：

解決策は、アレイをフロントエンドまたはバックエンドの単一の文字列に変換することです。

1. バックエンド処理：バックエンドがTXTファイルを読み取ると、ラインごとに配列に読み取るのではなく、完全な文字列として直接読み取られます。このようにして、フロントエンドで受信したデータを直接使用できます。

2. フロントエンド処理：バックエンドが配列を返す場合、フロントエンドはJavaScriptを使用して配列要素を文字列にスプライスできます。

    const article_content_string = article_content.join（ '\ n'）;
   $（ "＃article-content"）。html（article_content_string）;

3. jQueryのhtml()メソッド： jQueryのhtml()メソッドは、配列を処理し、文字列に変換してDOMに挿入できます。したがって、 $("#article-content").html(article_content); jQueryのバージョンと特定の実装に応じて。

上記の方法を通して、確実に<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>タグ内のコードは正しく解析されてレンダリングされているため、コード形式の損失の問題を回避します。選択するソリューションは、バックエンドプログラムの柔軟性とフロントエンドコードを変更する意欲によって異なります。

以上がタグ内のコードを外部テキストノードに解析するブラウザの問題を解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。