Skip to content

Instantly share code, notes, and snippets.

@tanaikech
Created August 20, 2018 01:03
Show Gist options
  • Save tanaikech/f84831455dea5c394e48caaee0058b26 to your computer and use it in GitHub Desktop.
Save tanaikech/f84831455dea5c394e48caaee0058b26 to your computer and use it in GitHub Desktop.
Replacing Text to Image for Google Document using Google Apps Script

Replacing Text to Image for Google Document using Google Apps Script

This is a sample script for replacing text to image for Google Document using Google Apps Script (GAS). There is a method for replacing text to text at Class Text of DocumentApp. But there are not methods for replacing text to image. So I created this sample script.

Demo :

This sample image was created by k3-studio.

Usage :

replaceTextToImage(body, replaceText, image, width);
  • body : body of document. You can set by DocumentApp.getActiveDocument().getBody() and DocumentApp.openById(documentId).getBody().
  • replaceText : string you want to replace.
  • image : blob of image you want to replace.
  • width : Width of replaced image. The aspect ratio is constant. The unit is pixels. If you don't use this, the original size is used.

Script :

In this sample script, all strings of "sample" in the document are replaced to image with the file ID of imageFileId.

function myFunction() {
  var replaceTextToImage = function(body, searchText, image, width) {
    var next = body.findText(searchText);
    if (!next) return;
    var r = next.getElement();
    r.asText().setText("");
    var img = r.getParent().asParagraph().insertInlineImage(0, image);
    if (width && typeof width == "number") {
      var w = img.getWidth();
      var h = img.getHeight();
      img.setWidth(width);
      img.setHeight(width * h / w);
    }
    return next;
  };

  var documentId = "### Document ID ###";
  var replaceText = "sample";
  var imageFileId = "### File ID of image ###";
  var body = DocumentApp.openById(documentId).getBody();
  var image = DriveApp.getFileById(imageFileId).getBlob();
  do {
    var next = replaceTextToImage(body, replaceText, image, 200);
  } while (next);
}

References :

@paulomoisessilva
Copy link

thankssss <3

@ThommenUlgar
Copy link

Great ! Is there a way to :

  • auto-replace the Document ID by the ID of the current document
  • replaceText should be the url of the image source
    ?
    Thank you in advance if you have any idea :-)

@iamhealey
Copy link

This continues to be incredibly useful. Well done!

@martinsydsin
Copy link

Dear Tanaike-san
Thank you very much for your great work.
I am using the function to replace text in a header with an image.
For some reason the function does not just replace the search-text but all the text in the header element.
Is there a simple way to modify the function to just change the search-text and leave the rest of the header intact?
Thank you very much.
Martin

@weltron5000
Copy link

weltron5000 commented Feb 18, 2021

Is it possible to do something similar with Google Slides? I am trying to go through all slides in the deck and replace every instance of "Yes" text with a graphic, but am struggling. I assume you have to change DocumentApp to SlidesApp, and perhaps do something the getBody function which may not work the same way in a Slides presentation (given the separate text boxes, and of course the separate slides with each with its own ID).


function myFunction() {

var replaceTextToImage = function(body, searchText, image, width) {
var next = body.findText(searchText);
if (!next) return;
var r = next.getElement();
r.asText().setText("");
var img = r.getParent().asParagraph().insertInlineImage(0, image);
if (width && typeof width == "number") {
var w = img.getWidth();
var h = img.getHeight();
img.setWidth(width);
img.setHeight(width * h / w);
}
return next;
};

var documentId = "#####Google Slides ID / URL######";
var replaceText = "Yes";
var imageFileId = "#####Image ID / URL#####";
var body = SlidesApp.openById(documentId).getBody();
var image = DriveApp.getFileById(imageFileId).getBlob();
do {
var next = replaceTextToImage(body, replaceText, image, 200);
} while (next);

}

@Fosphen
Copy link

Fosphen commented Mar 3, 2021

Hi ! Is it possible to replace only the triggered text, and not the entire line ?
I have loads of lines like this one to scan: actions.single_target=avatar,if=cooldown.colossus_smash.remains<8&gcd.remains=0
And only key words like avatar, colossus_smash, gcd need to be changed into image. But the script replaces the entire line
Kind regards !
Peter

@mabdurrafey1
Copy link

Thank You Very Much for this big contribution.

@jor77
Copy link

jor77 commented Oct 15, 2022

Hi, would it be possible to replace a drawing instead of text?

@K01571N3N
Copy link

Hi! I got this problem with my project.

"Exception: Unexpected error while getting the method or property getBlob on object DriveApp.File."

Document and image are both in my drive. I have tried that image as a png and jpg formats.

What is causing this problem? thanks!

@ludofigueiredo
Copy link

Thank you very much. Spend time with GPT to finally get back to basics.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment