tl;dr: I am essentially asking how the dynamic hyperlinking works in Google Docs
I want to create a similar function as the hyperlinking in Google Docs using HTML/CSS/JS (and JQuery). I've tried searching up how the hyperlink function works, how to add spans/anchor tags dynamically, etc. but found nothing too helpful.
For example, given some text:
The quick brown fox jumped over the lazy dog.
Let's say I want to change some attributes of the words "quick brown fox" and make them brown at the click of a button.
Or, more specifically, what I want to do is add an anchor tag or class, etc. to a word at a button click in order to dynamically add something to it (think hyperlinks in Google Docs as an example). Once you highlight the text and click the hyperlink button, the text becomes highlighted in blue and underlined, as well as a popup appears which allows a link to be inserted.
I've done a bunch of searching up and found some similar questions (change color of text with button click) but wasn't really what I was looking for.
This question got me closer, with the use of spans and an external library for dividing up each word into a span, but it is not exactly what I want.
(I'm not sure if this will help, but I also have the following function which gets the currently selected word(s) by the user)
function getSelectedText() {
var selection = DocumentApp.getActiveDocument().getSelection();
var text = [];
if (selection) {
var elements = selection.getRangeElements();
for (var i = 0; i < elements.length; ++i) {
var element = elements[i].getElement();
// Skip pictures/non-word elements
if (element.editAsText) {
var elementText = element.asText().getText();
if (elementText) {
text.push(elementText);
}
}
}
}
}
Does anyone have some insight into how I can do this?
