How to solve the problem of browsers parsing code inside tags into external text nodes?

The browser will<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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> Solution to parse code in tags into text nodes

In use<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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> When tags display code, browsers sometimes mistakenly parse the code into external text nodes rather than retaining the format of the code. This problem often occurs in scenarios where text files are read from the backend and then code snippets are displayed on the frontend. This article will analyze the causes of the problem and provide solutions.

Problem phenomenon:

Get the code text from the backend (for example, read from a txt file) and then display it in the frontend using the following code:

 $("#article-content").html(article_content);

result,<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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> The code in the tag is parsed into plain text, and the formats such as line breaks and spaces are lost, and the display effect does not match expectations.

The root of the problem:

The problem is usually that the data returned by the backend is not a complete string, but an array, which is caused by reading the txt file line by line.

Solution:

The solution is to convert the array into a single string on the front end or back end.

1. Backend processing: When the backend reads a txt file, it is directly read as a complete string, rather than reading it line by line into an array. In this way, the data received by the front-end can be used directly.

2. Front-end processing: If the back-end returns an array, the front-end can use JavaScript to splice array elements into a string:

    const article_content_string = article_content.join('\n');
   $("#article-content").html(article_content_string);

3. jQuery's html() method: jQuery's html() method can process arrays, convert them into strings and insert them into DOM. Therefore, it is also possible to take effect directly using $("#article-content").html(article_content); depending on the version and specific implementation of jQuery.

Through the above methods, ensure<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">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> The code inside the tag is correctly parsed and rendered, thus avoiding the problem of code format loss. Which solution to choose depends on the flexibility of the backend program and the willingness to modify the frontend code.

The above is the detailed content of How to solve the problem of browsers parsing code inside tags into external text nodes?. For more information, please follow other related articles on the PHP Chinese website!