How to Remove or Override the Class in Google Docs HTML Export Using Apps Script

When working with Google Apps Script to extract and display Google Docs content in a web app, you might encounter a scenario where the <body> element in the exported HTML contains unwanted class attributes. These classes can affect styling and cause inconsistencies when rendering the content on your website.

In this blog post, we’ll walk through how to remove the class attribute from the <body> tag while keeping the rest of the document intact. We’ll also explore an alternative approach: injecting custom CSS to override existing styles.

Why Remove the Class from `<body>`?

By default, when you export a Google Doc as HTML using Google Apps Script, it includes various attributes such as:

class
id
style
Other metadata

If you’re embedding this content into a web app, you might want to remove the existing class attribute from <body> to avoid unwanted styling conflicts.

Step-by-Step: Removing the Class from `<body>`

We’ll use Google Apps Script to fetch the document’s HTML and clean it up before displaying it.

1️⃣ The `doGet()` Function

This function is the entry point of a Google Apps Script web app. It calls convertHTML() to process the document and return a cleaned-up HTML output.

function doGet() {
  const id = "YOUR_DOCUMENT_ID_HERE"; // Replace with your Google Docs ID
  const html = convertHTML(id);
  return HtmlService.createHtmlOutput(html);
}

2️⃣ Fetch and Clean the HTML

The convertHTML() function:

Retrieves the document’s HTML export
Removes the class attribute from the <body> tag
Removes the <head> section (optional for a cleaner output)
Preserves all other elements and styles

function convertHTML(id) {
  try {
    DriveApp.getFileById(id); // Verify if the document exists
  } catch (err) {
    throw "Error: Invalid document ID - " + err.message;
  }

  const url = `https://docs.google.com/feeds/download/documents/export/Export?id=${id}&exportFormat=html`;
  const param = {
    method: "get",
    headers: {
      "Authorization": "Bearer " + ScriptApp.getOAuthToken()
    },
    muteHttpExceptions: true
  };

  let html = UrlFetchApp.fetch(url, param).getContentText();

  // Remove the <head> section
  html = html.replace(/<head>.*<\/head>/s, '');

  // Remove class attribute only from the <body> tag
  html = html.replace(/<body\s+[^>]*class="[^"]*"[^>]*>/i, '<body>');

  return html;
}

Injecting Custom CSS Instead

If you’d rather override existing styles without removing the class, you can inject a <style> tag inside <body>:

html = html.replace('<body>', '<body><style>body { background-color: white !important; color: black !important; }</style>');

This ensures that your custom styling takes precedence over any default styles applied to the document.

Final Thoughts

If you’re experiencing unexpected styling issues when embedding Google Docs content into a web app, removing the class attribute from <body> can help.
Alternatively, injecting a custom <style> block allows you to override styles without modifying the original HTML structure.
This script can be expanded to remove other attributes or apply further transformations as needed.

By leveraging Google Apps Script, you have full control over how your Google Docs content is processed and displayed in a web app.

Why Remove the Class from <body>?

Step-by-Step: Removing the Class from <body>

1️⃣ The doGet() Function