Automatic Find and Replace in Webflow

TL;DR:

• Webflow currently lacks a native Find and Replace feature.
• Manual methods include using CTRL + F, Google search, or custom code.
• Custom code requires technical knowledge and configuration for each instance.
• Letterdrop offers an automated Find and Replace feature for Webflow. This feature can replace text and hyperlinks, saving time and effort.

Looking to find and replace a snippet of text within your hundreds of Webflow collection pages?

At this point, Webflow still doesn't have a native Find and Replace feature, in spite of people asking for it.

The only workaround right now is to use custom code — but not every Webflow user is tech-savvy.

Luckily, there's a tool that integrates directly with Webflow so that you don't have to worry about manual Find and Replace again.

How to Find and Replace Manually in Webflow

Without a native Find and Replace feature in Webflow, users have had to get creative (and technical.)

There are three ways you can manually find the text you want to replace — and then go into that specified page yourself within the designer to replace it.

1. Using CTRL + F For On-Page Searches

Pressing CTRL + F or CMD + F brings up a search bar that lets you find specific words or phrases on a given page.

2. Using Google Search to Find Instances of Text to Replace

You can find exact references in your Webflow pages to replace using Google.

Type :site: [yoursite] [word you're looking to replace]

For example: site:letterdrop.com search intent

3. Using Custom Code

The third option is to use custom code.

You'll need to add custom code to the "Custom Code" tab within the Webflow designer that scripts the Find and Replace for you.

Here's an example of HTML code that you could use:

var elements = document.querySelectorAll('.gsc-table-result td a.gs-title');
// elements.forEach(function(element) {
//     //element.doSomething();
//     console.log(element);
//     var test = element.innerHTML;
//     console.log(test);
// });

function walkText(node) {
  if (node.nodeType == 3) {
    node.data = node.data.replace(/Park/ig, "zzz");
  }
  if (node.nodeType == 1 && node.nodeName != "SCRIPT") {
    for (var i = 0; i < node.childNodes.length; i++) {
      walkText(node.childNodes[i]);
    }
  }
}
walkText(document.body);

This does require you to configure the code for each instance of the text you're looking for — not ideal for those without technical backgrounds.

Find and Replace Feature for Webflow

Letterdrop is a headless CMS that connects directly to Webflow — and among the many features it offers is a Find and Replace feature.

You can automatically replace text as well as hyperlinks, which helps with your internal linking structure.

‎Don't spend hours on manual workarounds for Webflow find and replace — automate it today.