Two-way Input and Exchange
The plain text ⇔ HTML mutual conversion tool features two directions: a "text2html" process that generates HTML source code from input plain text, and an "html2text" process that removes tags from HTML source code to extract the text body.
By pressing the "Switch conversion direction" button (left and right arrow icon) at the top of the screen, the application's internal direction state switches, swapping the data direction of the input and output areas.
During text-to-HTML conversion, the text entered in the left text area is monitored in real-time by React state management, with HTML conversion running upon every input to reflect results in the right output area.
When switched to HTML-to-text mode, the input area receives HTML code, while tag-stripped plain text appears on the output side. When switching directions, the current input and output data are swapped, allowing you to test reverse processing based on the converted result.
This tool does not have local file read/write or save capabilities; all target strings must be supplied manually or pasted from the clipboard.
Clicking the "Clear" button (trash can icon) simultaneously erases both input and output to empty strings, resetting the state. All string conversion processing relies entirely on your web browser's internal mechanisms.
Paragraphs, Line Breaks, and Character Escaping
In the text-to-HTML conversion mode, paragraphs and line break tags are automatically inserted based on line break positions in the input string.
Specifically, when consecutive line breaks of two or more (line breaks sandwiching a blank line matching \n\n+) are detected using a regular expression, the string block is split there, and each block is enclosed in an independent <p> (paragraph) tag.
Meanwhile, single line breaks within a block do not split the paragraph; instead, a <br /> tag is inserted at the end of the line to represent an HTML line break.
Additionally, special characters that cause unintended behavior if interpreted as HTML are escaped (replaced with character references) during the initial conversion stage before any URL linking or list transformations take place.
The escaping targets five characters: ampersand (& to &), less-than sign (< to <), greater-than sign (> to >), double quotation mark (" to "), and single quotation mark (' to ').
Because quotes are converted to character entities, any quotes originating from the plain text remain safely encoded as entities even if they end up inside generated attribute values such as href.
This sanitization is strictly textual character replacement and does not constitute full URL trust verification or a generic HTML sanitizer.
This escape process is always applied during text-to-HTML conversion and cannot be disabled by user settings. The reverse HTML-to-text conversion logic remains unchanged.
Consecutive whitespace characters are reflected in the output code as half-width spaces as-is, though browser rendering specifications treat consecutive spaces as a single blank space.
No special tag conversion for indentation or automatic replacement with non-breaking spaces ( ) is performed, and complex nested lists or custom list start numbering attributes remain unsupported.
Links and Single-layer Lists
In the text-to-HTML conversion feature, you can toggle settings switches to individually control automatic URL linking and bullet point list conversion.
When toggling either option, the newly checked boolean value is passed into the conversion function immediately as an argument, eliminating any stale setting lag so the output refreshes right away without requiring an additional text edit.
When the "Convert URLs to links (<a>)" setting is enabled (true by default), the regular expression /(https?:\/\/[^\s<]+)/g searches the input text for sequences starting with http:// or https:// that do not contain spaces or <.
Because the initial stage escapes five characters (&, <, >, ", and ') prior to link conversion, any quotes occurring in the plain text are converted into character entities before substitution, so quotes appear as entities inside the generated href attribute.
The regex matching behavior itself remains otherwise unchanged, functioning purely as a text-pattern matcher rather than URL trust verification or generic HTML sanitization.
The matched string is automatically replaced with the format <a href="URL" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline font-semibold">URL</a>.
Enabling the "Convert bullet points to lists (<ul>/<ol>)" setting checks whether every line in a newline-separated block starts with specific symbols.
If all lines in a block begin with a hyphen or asterisk followed by a space (e.g., - Item), the entire block is wrapped in an unordered list <ul> tag, and each line is converted to an <li> tag after removing the symbol.
Similarly, if all lines begin with a number, a period, and a space (e.g., 1. Item), they are wrapped in an ordered list <ol> tag and converted to <li>.
However, these list conversions only target a single layer; they do not support nested structures based on leading space depth or preservation of original numbers (such as adding a start attribute), and the reverse HTML-to-text conversion logic is unchanged.
Text Extraction from HTML Body
In the HTML to plain text conversion mode, tags are removed from the input HTML code to extract only the text body. This extraction relies on the browser's DOMParser API to interpret the input string as a text/html DOM tree rather than simple regex replacement.
During the analysis process, it does not remove <script>, <style>, or <template> elements; thus, traversing the DOMParser text may leave the content of scripts or styles in the extracted text body.
It then traverses the DOM hierarchy, concatenating strings from text nodes (Node.TEXT_NODE). When passing through element nodes (Node.ELEMENT_NODE), line breaks are adjusted according to the tag type: inserting one line break for <br> and a line break with a bullet (•) for <li>.
At the end positions of <p>, <div>, <ul>, <ol>, <h1> to <h6> representing paragraphs and headings, and <tr> representing table rows, two line breaks are added to secure spacing between blocks.
Because this process is specialized for text extraction, formatting features indicating the structure such as image tag alt attributes, link tag href attribute URLs, and table column (<td>) formatting are not preserved.
When an exception error occurs, it falls back to alternative replacement processing using regular expressions.
Code and Restricted Preview
When converting from text to HTML, two tabs, "HTML Source" and "Preview", are provided in the right output area. The "HTML Source" tab displays the HTML code itself generated by the conversion.
This area functions as a confirmation screen for copying the output code for other uses, allowing direct visual inspection of tag structures such as generated <p>, <br />, and escaped character references.
The output content is wrapped by whitespace-pre-wrap, making long code viewable in the display field. Switching to the "Preview" tab displays a screen simulating how an actual web browser would render the generated HTML code.
This preview is rendered via a SafeHtmlPreview component, attempting to display the content while restricting JavaScript execution and unintended external resource loading using the sandbox attribute of the browser's iframe, Content Security Policy (CSP), and React-side attribute limitations.
However, these restrictions are intended solely for temporary display protection in the preview screen; they do not authenticate or verify the absolute sanitization of the generated HTML source code itself.
The HTML code provided as output text is merely the result of applying specified escaping and tagging to the input text. The SafeHtmlPreview is a shared restricted preview, but it does not make the content safe for wherever it may be pasted.
Use it for rendering confirmation within the scope of settings and restrictions.
Pre-copy Confirmation and Irreversibility
The converted result text or HTML source is sent to the OS clipboard by clicking the "Copy" button (clipboard icon) located at the top of the output area.
The converter awaits clipboard write completion before reporting success, expires success indicators after two seconds, provides a manual copy snapshot upon failure, and automatically clears feedback whenever text, settings, or direction change.
You must always verify that the strings in the output area are in the intended format before copying. The "text to HTML" and "HTML to text" conversions in this tool are irreversible.
For instance, when plain text is converted to HTML, < and > are escaped to < and >, and consecutive line breaks are split into <p> tag blocks.
Reversing this output back to text will not yield a result that perfectly matches the original plain text's line breaks or spacing, due to DOM node concatenation and element readjustment.
Lossless round-trip conversion is not guaranteed. Furthermore, this tool only temporarily processes input strings in the browser's memory and does not save input data to an external server database.
However, since it operates in a browser, cookies and other information may be transmitted in standard HTTP requests made in subsequent separate tabs according to browser specifications.
This tool does not block site-wide network communication. Please understand the processing scope and irreversibility before copying and utilizing the required output.