HTML Code Convert To Text

This tool help you convert HTML to a text format suitable for embedding as code snippets. you can transform HTML code into a non-executable text format for different reasons, such as embedding code snippets in documentation, avoiding execution in web browsers, or ensuring safe display in forums and blogs.

When converting HTML to text, we usually convert or escape special characters and tags into HTML entities. This way, the code will be displayed as plain text instead of being treated as HTML

This conversion replaces special characters with HTML entities to display code as plain text. For example, < becomes <, > becomes >, and & becomes &.

Paste Your HTML Code Here

Output Option

Line Break <br>

Keep Space

Remove Line Break And Space

Convert Clear code

Text Preview as HTML Preview inside a code tag

Copy code

Run code Edit Code Download

If you want to display HTML code snippets in text format, you can wrap them in <code> tags within your HTML document.

How to code snippet in HTML?

Here's how you can do it:

HTML

<pre>
&lt;h1&gt;This is a Heading&lt;/h1&gt;
&lt;p&gt;This is a paragraph.&lt;/p&gt;
</pre>

To make the code snippets easier to read, we can add some extra CSS styling. This includes things like changing the background color, adding padding, and choosing a specific font family.

How to Convert HTML Code to Text Format Using JavaScript

To convert HTML code into text format for embedding code snippets using JavaScript, be sure to escape special characters to display them as text instead of HTML. Here is a simple JavaScript function HTML to text

1, Create a function to escape HTML characters:

This function replaces <, &, > special HTML characters with their corresponding HTML entities to ensure they are displayed correctly in the browser

JavaScript

const html_to_text = html => {
    return html.replace(/&/g, "&amp;")
               .replace(/</g, "&lt;")
               .replace(/>/g, "&gt;");
}

2, Use this function to convert your HTML code to a text format

Usage

<pre id="pre-code"></pre>

<script>
const html_code = `<h1>This is a Heading</h1>
        <p>This is a paragraph.</p>`;

const converted_html = html_to_text(html_code);

console.log(converted_html);

// output
// &lt;h1&gt;This is a Heading&lt;/h1&gt;
// &lt;p&gt;This is a paragraph.&lt;/p&gt;

// Preview the escaped HTML in a <pre> or <code> tag
document.getElementById("pre-code").innerHTML = converted_html;
</script>

Report Problem