Category: Using Word to HTML

You can use the find and replace section to further customize your HTML. You can search for any text and replace or delete it. Find and replace supports regular expressions. You can have multiple several find and replace entries and you can also choose the order in which they run (entries are executed from first to last).

Please note that every occurrence of a given text to find will be replaced or deleted.

Typical uses for find and replace

• Replacing or deleting words or phrases in your text
• Changing font types, e.g. change Arial to Verdana, modify CSS styles
• Find and delete HTML code you do not need
• Find and replace HTML with regular expressions for advanced users

Usage examples

Basic find and replace

1. Enter text or HTML to find in the Find field (1).
2. Enter replacement text or HTML in the Replace field (2).
3. Click the blue Add button on the right side (3).
4. Click the green Cleanup HTML button to run HTML processing.

Once HTML processing is done you will see changes in the editors:

Simple find and replace of text in HTML when selecting code in HTML Editor

1. Select some text in your HTML Editor (1) and click Add to Find button (2). Word to HTML will automatically add selected text into the find input field (3). The same can be done with Ctrl+C (copy) and Ctrl+V (paste).
2. Then add replacement text (4) or leave it empty if you want to delete given text occurrences from HTML.
3. Click the Add button (5). You should see the find and replace item on the list (6).

Click the Cleanup HTML green button (located below the HTML editor) to see the results of find and replace:

Delete HTML or text

1. Select some text in your HTML Editor (1) and click the Find and Delete button (2). Word to HTML will automatically add selected content into items to delete (3).

Click the Cleanup HTML green button to see the results of find and replace. As you can see below <p>Text to delete…</p> was removed:

Change all <p>…</p> to <span>…</span> tags (basic scenario without regular expressions)

Input HTML:

<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>

Find and replace items:

Output HTML after cleanup (all p tags changed to span tags):

Change all <p…>…</p> to <span…>…</span> tags (more advanced scenario with regular expressions)

Usually, HTML start tags contain attributes so find and replace is not that simple and the best way to do it is to use regular expressions.
Input HTML:

<p>First paragraph.</p>
<p id="test">Second paragraph.</p>
<p style="color: red">Third paragraph.</p>

In order to find (match) any <p…> tag you have to use regular expressions (1). Basically <p([^<>]*)> will find any <p…> start tag. Replace value (2) has $1 which means that anything that was found/matched by ([^<>]*) will be copied to replace value. In order to use regular expressions please tick ‘Use regular expression’  checkbox (3). Below you can see find and replace with regex on the list (4).

Output HTML after cleanup (all p tags changed to span tags and all attributes are there):

More information about regular expressions (RegEx)

Advanced users can use regular expressions to create more powerful find and replace commands. This is a good introductory guide to RegEX https://www.w3schools.com/js/js_regexp.asp

These options let you easily control what you want to be removed from your code. All you have to do is enable the toggle of the options you need.

You can hover over any option with your mouse to see more information about each option:

Remember you always need to click the green ‘Cleanup HTML’ button to run the cleanup process, it is not automatic.

Only if you upload a document and convert it to HTML you can enable the Auto Cleanup to run it automatically after a document has been converted to HTML.

If you don’t like how an option affected your code you can click the undo icon above the HTML code editor to revert it to how it was, then you can try different cleanup options.

When you find the cleanup options that work best for you, you can easily save them to a template for future use.

Every option you have in the HTML cleanup section, find and replace, CSS styles to keep/remove, manage tags & attributes and custom Javascript will be saved to your template file.

All you have to do is click the blue save button to save your template. You can then reuse your template anytime by selecting it from the drop-down templates list.

If you click on the arrow to the right of the save button you will be able to rename, duplicate, reload, share, and delete your template.

It is important that you click the green Cleanup HTML button to run your template.

If you are not happy with the results then click the Undo icon in the HTML editor and then change cleanup options and again click the Cleanup HTML button until you are happy with your HTML.

Word to HTML lets you upload or drag and drop your documents to convert them to HTML instantly. All you have to do is click the blue upload button to select your file or drag and drop a document into the white section.

After your document is converted you can either Edit it in the Visual Editor, you can Preview, Download, or Delete it if you want to remove it permanently from our servers right away after you have downloaded or copied converted HTML.

Batch convert documents to HTML

Our Business Plan users can upload and convert more than one document at once. Just select and upload more than one document or drag and drop more than one document into this section.

The file formats we support are:

• MS Word DOC and DOCX format
• PDF format
• RTF Rich text format
• ODT Open doc format
• HTML and text files

Embed images

Selecting the embed images option converts your images to code. This means you do not need to have separate image files, everything is in one document. This option is used when pasting images into Visual Editor as well. This option is useful for small images like graphics but if you have a lot of images in the file it may increase the size and complexity of the code a lot. Be aware when you embed images the code can look strange, you will see lots of random-looking code as shown in the screenshot below. But don’t worry when you put the HTML live the images will show ok.

Full page mode

Are you creating standalone HTML files? No problem, this option adds the <head> and <body> to HTML, you need this so the page displays correctly. If you are pasting into a web-based system like WordPress, Amazon, eBay, etc. you will not need this option.

Fixed HTML

If you need your HTML to look exactly like your input document then tick this fixed HTML option, but please be aware that the fixed layout may not look great on mobile devices. It’s useful when used as a standalone HTML page or when shown in an <iframe>. This option enables the Full page mode option which is required to display fixed HTML pages correctly.

Auto Cleanup

If you enable this option Word to HTML will automatically run a cleanup options or template you have selected. No need to click the Cleanup HTML button if this option is enabled.

You can also Auto Save updated and cleaned-up HTML. Just enable the last option on the right (save icon).

Converting images to text with OCR

If your PDF file has scanned text content in an image format Word to HTML will attempt to OCR it and convert it to text.

The interface can be changed to suit your needs. By clicking the arrows between the two editors you can choose to make one larger or smaller:

You can change both Visual and Code editor height by dragging up or down the bottom bar in the Visual Editor:

In order to set the default editor height you can set it in the Preferences:

When using TinyMCE editor you can change both Visual and Code editor height by dragging the corner of TinyMCE editor:

Full-screen mode

In the Visual editor and the code editor, you can choose to go full screen.

Word to HTML is super simple to use. All you have to do is paste your text into the Visual Editor box on the left side or you can create your content directly in the editor.

We will automatically convert your text to HTML code as you type, you don’t need to do anything. Your code will appear on the HTML Code Editor on the right.

When you have finished you can just copy the code from the code editor to the clipboard or you can save it online on WordToHTM and edit it later or download it.

Watch our quick less than 2 minutes feature overview video:

Cleaning up your HTML code

With our powerful cleanup options and find and replace processing, you can improve your code with a few simple clicks. You can even use more advanced features like Manage Tags & Attributes or even add your own custom Javascript code in order to change HTML in any way.  Just turn on the options you want to remove then click the green ‘Clean HTML’ button. You need to click the green button every time you change any option in the cleanup section.

Saving HTML online

You can save your documents so you can work on them later. Just click the blue Save button. WordToHTML has an Autosave feature (enabled by default, but you can disable it in the Preferences) which means we save your work for you automatically every 5 minutes. If you turn this off you need to remember to hit the Save button to save your work.

Exporting files

You can export your files in HTML, Word DOCX, PDF, or EPUB format. All you have to do is click the drop-down icon next to the Save button, then select the export format you want:

Google fonts are a great way to make your web pages more visually appealing. Hundreds of great-looking fonts are available, and best of all, they are free.

One way to use custom fonts is to add custom CSS to your HTML page in the <head> => <style> tag, as shown in the screenshot below.

Also, you can view this sample code below or here: custom Font Example HTML

<!DOCTYPE html>

Please note that the best place to add your custom fonts CSS is either the <head> tag or add an @import and CSS in your web page style file.
The example below has CSS that adds Google Web Open Sans font in the <head> tag, but it should work if you add that <style> tag in your HTML page body.

Another way is to define your fonts in Settings:

1. Go to the Google Fonts website to get your font links.
2. Select the font you want to use, and copy its link as shown in the screenshot below.

1. Enter the font name into the custom fonts section on the Settings page
2. Paste the font link into the font URL box

If you want to use more fonts, just enter the font names and links separated by the # char.

Once your fonts are defined, you can then select them in the Visual Editor at the end of the fonts list:

You can use custom fonts in the Email Designer as well. Please note that the Email Designer already has these Google Fonts defined: ‘Bitter’, ‘Cabin’, ‘Lato’, ‘Merriweather’, ‘Open Sans’, ‘Oswald’, ‘Poppins’, ‘PT Sans’, ‘PT Serif’, ‘Roboto’, ‘Ubuntu’.