How to extract specific HTML elements using fetch in Zapier JavaScript

Other Questions Zapier
1

I’m working with a JavaScript code block in Zapier that pulls HTML content from a webpage using this approach:

fetch('https://example-test-site.com')
  .then(response => {
    return response.text();
  })
  .then(htmlContent => {
    var result = {recordId: 5678, fullHTML: htmlContent};
    callback(null, result);
  })
  .catch(callback);

The code works fine but I’m getting way more HTML than I actually need. Instead of capturing everything, I want to grab just one particular section. Is there a way to filter the response so I only get HTML from a specific element like a div with class ButtonContainer? I need to make the output more focused and smaller.

2

You can also slice out content between specific markers using string manipulation. Works great when you know your target element’s exact structure:

fetch('https://example-test-site.com')
  .then(response => response.text())
  .then(htmlContent => {
    const startMarker = '<div class="ButtonContainer"';
    const endMarker = '</div>';
    const startIndex = htmlContent.indexOf(startMarker);
    
    if (startIndex !== -1) {
      const endIndex = htmlContent.indexOf(endMarker, startIndex) + endMarker.length;
      const extractedContent = htmlContent.substring(startIndex, endIndex);
      var result = {recordId: 5678, targetHTML: extractedContent};
    } else {
      var result = {recordId: 5678, targetHTML: 'Element not found'};
    }
    callback(null, result);
  })
  .catch(callback);

This approach is simple and doesn’t need regex. Just make sure your end marker is unique enough so you don’t cut off content too early.

3

zapier’s js is a pain for html parsing. skip the regex - use split() instead. way cleaner and won’t break on you. split on your opening tag, then split again on the closing tag: htmlContent.split('<div class="ButtonContainer"')[1].split('</div>')[0]. you might need to add the div tags back, but it’s so much easier than wrestling with regex.

4

You’ll need to parse the HTML content before extracting specific elements. Zapier’s JavaScript environment is limited, so use regular expressions for simple extraction patterns. For your ButtonContainer div, try this:

fetch('https://example-test-site.com')
  .then(response => response.text())
  .then(htmlContent => {
    const regex = /<div[^>]*class=["'].*?ButtonContainer.*?["'][^>]*>.*?<\/div>/gis;
    const match = htmlContent.match(regex);
    const extractedHTML = match ? match[0] : '';
    var result = {recordId: 5678, filteredHTML: extractedHTML};
    callback(null, result);
  })
  .catch(callback);

This worked for me in similar situations. Regex parsing HTML isn’t perfect for complex nested structures, but it handles most basic cases well enough. If your target element has consistent markup, this should grab exactly what you need without the extra content.