This post should be a short one, and builds on a few previous posts that involve creating custom Google Docs. In those articles, I demonstrate how to use various methods of DocumentApp to create custom Google Docs using Google Apps Script.
In most of those examples, I use a method called replaceText that exists on the document body to find text with a particular pattern and replace that text with other text supplied either from a spreadsheet or a form response. However, lots of people have asked me how to replace some text with a clickable link instead of just some text. While this is possible, it requires a little bit more work using the DocumentApp class.
var doc = DocumentApp.openById("Your Doc Id Here");
var body = doc.getBody();
body.replaceText("{{Title}}", "Doc Title");
body.findText("{{ClickableLink}}").getElement().setText("Click Here").setLinkUrl("https://google.com");
doc.saveAndClose();
Since the Body.replaceText method is only meant for finding and replacing text with other pieces of text, we need to dig deeper into the document to set additional properties. Instead, we use the findText method that returns a more generic object called a RangeElement, which is essentially a representation of where inside of the document structure this text is located that contains the actual element.
From here, we call getElement to actually return us the Text element of our replacement tag, and then we call setText and setLinkUrl to set the anchor text to “Click Here” and the actual link url to Google Search. The end result of this in the Google Doc is a clickable URL inside our table.
It’s outside the scope of this tutorial to talk about RangeElements and Elements, if you’re interested in doing more complicated work with Google Docs and Apps Script, it might be worth referencing the docs. Everything you see or interact with inside of a Google Doc is a more specific element.