How to Remove <span> Tags that Mess Up WordPress Formatting (Find & Replace)

Do you have a post/page where hyperlinked text is not formatting the way it does on other pages (e.g. not bolded)?

This article will:

1. Help you identify when hidden <span> styling tags are preventing links from formatting correctly
2. Provide instructions for how to quickly and easily remove them from a post without affecting any other formatting.

If you just need the process for how to do a find and replace, click here to jump to that section.

Note that this process works with anything in the HTML for a WordPress post, not just <span> tags.

Why <span> Tags Cause Problems, and How to Prevent Them

The way to avoid formatting issues when copying text from Microsoft Word or Google Docs into a WordPress post is to paste without formatting (Ctrl + Shift + V) and then apply any necessary formatting (bold, headings, etc.) within WordPress.

If you paste into WordPress without removing the formatting, the text will look the same in the Visual tab, but when you view the Text tab, you will see hidden formatting code that has been pasted along with the text. This code can cause issues with how the post looks after you publish it.

A common example of the code that gets pulled over from Google Docs is:

<span style=”font-weight: 400;”>The text of your post that will show up on the Visual tab like nothing’s wrong.</span>

While this will usually not make much of a difference in how your post looks, it can sometimes override the default CSS styling of the website, making the text of your post look different from that on other pages. Where this can be most problematic is text links.

On most of our sites, text links will be bolded and display as a different color so that they stand out from the rest of the body text. This helps prompt people to click on them, which is especially important for links to the Vacation Guide page or the booking engine.

While the <span> tags will not prevent the links from working, they will prevent linked text from being bolded, making them almost impossible to notice. This can hurt your page’s conversion rate, since people won’t notice that the words “download our vacation guide” are a hyperlink, for example.

A comparison example:

This sentence includes a text link with the website’s correct formatting.

This sentence includes a text link that is also wrapped in a <span> tag.

Note the difference between the two links, and how the top one stands out more than the bottom one.

This is also how you can quickly identify posts on a website that have <span> tags overwriting the styling. Here’s an example of the real-world difference this can make.

Here’s what the HTML looks like when you view the “Text” tab.

While you can avoid this issue by pasting without formatting, what do you do if you have a published, fully-formatted post that has the <span> tags preventing the links from being styled correctly?

You could go through the post and delete the tags one-by-one, but unless there are just a couple, that takes a long time. Thankfully, there’s a better way.

Enter Notepad.

Notepad is the built-in plaintext editor for Windows. It also has a very helpful feature that WordPress is lacking: Find and Replace. Here’s how you can use that to quickly fix any post in about 2 minutes.

Remember: In HTML, every tag starts and ends with angle brackets <>, and there will be a beginning and end tag for every section of code.

You must delete the beginning and end sections of the tag to remove it (sections with a strikethrough, below).

<span style=”font-weight: 400;”>The text of your post that will show up on the Visual tab like nothing’s wrong.</span>

How to Quickly Remove <span> Tags from a WordPress Post Without Removing Any Other Formatting

1. In WordPress, click “Edit Post” on the post you want to fix.
2. Click the “Text” tab to view the HTML for the post.
3. Confirm that there are <span> tags present.
4. Select all text in the post (Ctrl + A), then copy (Ctrl + C).
5. In Windows, open a new, blank Notepad file (you won’t need to save it).
6. Paste the complete HTML text of your post into the Notepad file (Ctrl + V).
7. Find any instance of the beginning <span> tag, <span style=”font-weight: 400;”>, and highlight it (making sure not to highlight anything except for that exact snippet).
8. Click Edit > Replace (or Ctrl + H) to open the Find and Replace dialog box. The text you highlighted will be in the “Find what” box by default.
   
9. The “Replace with” box should be blank by default. Make sure there’s nothing in it, not even a space.
10. Click “Replace All” to remove every beginning <span> tag in the document by replacing it with nothing.
    (Note: If you haven’t done this before, you can just click “Replace” to replace only the first <span> tag so you can make sure it worked correctly.)
11. In the “Find what” box, delete the contents and type in </span>. Leave the “Replace with” box empty.
    
12. Click “Replace All” to remove all of the ending </span> tags.
13. Close the “Replace” box – the Notepad file will now have the complete HTML you want, with all <span style=”font-weight: 400;”> and </span> tags removed.
14. Select all of the text in the Notepad file (Ctrl + A) and copy it to your clipboard (Ctrl + C).
15. Navigate back to the WordPress post. Make sure you are still on the Text tab, not Visual.
16. Select all of the WordPress text and delete it – the box should be empty now.
17. Paste in the text from your Notepad file (Ctrl +V).
18. Click to the Visual tab to confirm that all of your other formatting (bold, headers, etc.) is still as it should be.
19. Click “Preview” to check the post and confirm that the linked text is now formatted correctly.
20. If so, click “Update” to save the post.