Convert Plain Text to HTML
Many apps and software that let you type in text for publishing on web pages automatically convert what you type into HTML.
HTML tags p and br are the most common HTML tags inserted during the conversion. Some also create img tags from image URLs found in the plain text. And create clickable links from URLs.
There are, however, apps and software that require you to provide your own HTML markup.
It can be time consuming or even a challenge to take plain text and edit it to display in a browser with valid HTML.
This morning, while casting about for an article topic, I found out I've been remiss: No plain text to HTML converter was anywhere on the willmaster.com website.
Oh, there are a lot of converters, over two dozen as a matter of fact. See the generators and converters index page. But no plain text to HTML converter.
Today that is rectified. The plain text to HTML converter has been created. Use it in any of three locations.
-
The software can be used on this page (further below in this article) to convert your plain text into HTML. Paste or type in your text and click the button.
-
The form and conversion functionality can be installed on your web page with one line of JavaScript. It works on WordPress and on non-WordPress pages.
-
The PHP plain text to HTML conversion software can be downloaded and installed on your domain.
The Plain Text to HTML Converter
Here is the converter. Use it right here in this article.
The software currently inserts p and br HTML tags.
Wherever one or more blank lines occur, the p tag is used. Hard returns without a blank line get br tags.
Updates planned for the near future include:
-
DONE (version 1.1)
Makeimgtags from absolute http://... image URLs — image URLs being defined as file names ending with .gif, .jpg, .jpeg, and .png. -
DONE (version 1.1)
Make clickable links from absolute http://... non-image URLs. -
Convert one-paragraph lists to ordered or unordered lists.
-
Provide choice of HTML or XHTML coding.
-
Provide choice where to put the <BR> tag (beginning of line, ending of line, within line).
The updates will automatically be applied to
- the converter on this page and
- the converter you get when you install the form and conversion functionality on your web page with the single line of JavaScript.
The downloadable software will need to be re-downloaded and re-installed for updates.
Converter on Your Page With One Line of JavaScript
The form and conversion functionality can be installed on your web page with this line of JavaScript.
<script src="//www.willmaster.com/library/external/PlainText2HTML.php?load"></script>
Paste the JavaScript into your page and you're good to go. If you publish with WordPress, use the "Text" tab, not the "Visual" tab at your post/page editing interface.
It will work like the converter further above on this page because it's pulled into the article by that same JavaScript. Depending on your CSS, the design on your page may be different.
Downloadable Plain Text to HTML Converter
The download is a complete web page.
The web page can be downloaded and saved to your hard drive or the source code can be copied from this box and pasted into your own file. No customization is required, but may be desired. Notes follow the source code.
<!DOCTYPE html>
<!--
Plain Text to HTML Converter
Version 1.1
September 10, 2016
Version 1.0 of September 3, 2016.
Version 1.1 of September 10, 2016 added img and a tag conversion for absolute http://... image and other URLs.
Will Bontrager Software LLC
http://www.willmaster.com/
Copyright 2016 Will Bontrager Software LLC
This software is provided "AS IS," without any warranty of any kind, without
even any implied warranty such as merchantability or fitness for a particular
purpose. Will Bontrager Software LLC grants you a royalty free license to use
this software provided this notice appears on all copies.
-->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plain Text to HTML Converter</title>
<style type="text/css">
body { font-size:100%; }
a { text-decoration:none; }
#content { max-width:6in; margin:.5in auto; }
.box-style {
width:100%;
border:1px solid black;
box-shadow:.25em .25em .25em 0px #ccc inset;
border-radius:.25em;
font-size:1em;
padding:.75em;
box-sizing:border-box;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="<?php echo(htmlspecialchars($_SERVER['PHP_SELF'])); ?>">
<div id="content">
<div style="float:left; position:relative; top:-6px; margin-right:1em;"><a href="http://www.willmaster.com/"><img src="http://www.willmaster.com/images/wmlogo_icon.gif" style="width:50px; height:50px; border:none; outline:none;"></a></div>
<h1 style="margin-top:0;">
Plain Text to HTML Converter
</h1>
<!-- The conversion result presentation section. -->
<?php
$Converted = '';
if( isset($_POST['convert']) ) { $Converted = htmlspecialchars(ConvertPlainTextToHTML($_POST['convert'])); }
function ConvertPlainTextToHTML($s)
{
$LineFeed = strpos($s,"\r\n")!==false ? "\r\n" : ( strpos($s,"\n")!==false ? "\n" : "\r" );
$s = trim($s);
$s = strpos($s,"\n")===false ? str_replace("\r","\n",$s) : str_replace("\r",'',$s);
$s = preg_replace('/\n\n+/','~~N-n~--</p>~~N-n~--<p>~~N-n~--',$s);
$s = str_replace("\n","\n<br />",$s);
$s = str_replace('~~N-n~--',"\n",$s);
$s = "<p>\n$s\n</p>";
# Image URLs into IMG tag.
$matches = array();
preg_match_all('!\b(https?://[a-zA-Z0-9\-\._\~\:/\'\+\=\%\(\)]+\.(png|jpg|jpeg|gif))!s',$s,$matches);
foreach( $matches[1] as $match )
{
$encoded = quotemeta($match);
$s = preg_replace( '!\b'.$encoded.'!s', '<img src="h__HH__h' . $match . '" style="max-width:100%;" />', $s );
}
# Non-image URLs into A tag.
$matches = array();
preg_match_all('!\b(https?://[a-zA-Z0-9\-\._\~\:/\?\#\[\]\@\!\$\&\'\(\)\*\+,;\=\%]+)!s',$s,$matches);
foreach( $matches[1] as $match )
{
$encoded = quotemeta($match);
$s = preg_replace( '!\b'.$encoded.'!s', '<a href="' . $match . '">' . $match . '</a>', $s );
}
# Image URLs from h__HH__hhttp:// to http:// and from h__HH__hhttps:// to https://
$s = str_replace('h__HH__hhttp','http',$s);
return str_replace("\n",$LineFeed,$s);
}
?>
<?php if( $Converted ): ?>
<p style="margin-bottom:1pt;">
The converted text is in this box ready to copy and paste.
</p>
<div class="box-style" style="white-space:pre-wrap;"><?php echo($Converted) ?></div>
<p>
Another?
</p>
<?php endif; ?>
<!-- The plain text input section. -->
<p style="margin-bottom:1pt;">
Paste or type plain text into this box, then click the button to convert to HTML.
</p>
<textarea name="convert" class="box-style" style="height:100px;" onfocus="UpdateTexareaBoxHeight(this)" onkeyup="UpdateTexareaBoxHeight(this)"><?php echo(htmlspecialchars(@$_POST['convert'])) ?></textarea>
<p style="margin-top:.5em; margin-bottom:0;">
<input type="submit" style="width:100%; box-sizing:border-box;" value="Convert Text to HTML">
</p>
<p style="margin-top:.25em;">
Complimentary from <a href="http://www.willmaster.com/">Will Bontrager Software LLC</a>
</p>
</form>
<script>
function UpdateTexareaBoxHeight(d)
{
var minheight = 100;
var h = d.scrollHeight + 2;
if( h < minheight ) { h = minheight; }
d.style.height = h + "px";
}
</script>
</div>
</body>
</html>
Notes:
As stated, the source code is a complete web page. The page may be re-designed.
If the functionality is to be moved to a different web page, notice the two functionalities are separated and marked in the web page source code:
-
Where the plain text is typed or pasted into the form:
This is the last section on the page. It's beginning is marked with <!-- The plain text input section. -->
-
Where the conversion result is published:
This section is immediately above the plain text input section. It's beginning is marked with <!-- The conversion result presentation section. -->
Each of the sections uses a class named box-style to style the text boxes. You'll find the style in the downloadable page's head area.
You now have three options for converting plain text to HTML. It can be done on this page, on your page with a line of JavaScript, or on your site with the conversion software installed.
If you elect to download and install the software, check back occasionally to see if new conversion features have been added. The functionality inserted into your page with a line of JavaScript is automatically updated.
(This article first appeared in Possibilities ezine.)
Will Bontrager
