How to convert formatted text to html tag in Google-apps-script? - google-apps-script

Question

I want to convert a formatted text in a cell to html but I don't know how to read the format of the text.
Let's say that I have the following text in a cell:
A text with a bold word.
And I would like to convert it in an other cell to:
A text with a <b>bold</b> word.
How can I do that?
I didn't find anything useful in the Spreadsheet API to read format info...Does anyone have any tips?
Thanks.
EDIT: I've created a feature request. Please vote to have the feature.

Answer 1

My Google Script
/**
* Rich Text to HTML.
* #param {string} qRange Input text.
* #returns {string} Text as HTML.
* #customfunction
*/
function RICHTEXT_TO_HTML(qRange) {
var indexBool = false;
var indexItalic = false;
var indexUnderline = false;
var indexStrikethrough = false;
var sheet = SpreadsheetApp.getActiveSpreadsheet();
var range = sheet.getRange(qRange);
var cell = range;
var cellValue = cell.getRichTextValue();
var txt = String(cell.getDisplayValue());
var styles = cell.getTextStyles();
var result = '';
for (var i = 0; i < txt.length; i++) {
var style = cellValue.getTextStyle(i, i + 1);
if (!indexStrikethrough && style.isStrikethrough()) {
indexStrikethrough = true;
result += '<strike>';
} else if (indexStrikethrough && !style.isStrikethrough()) {
indexStrikethrough = false;
result += '</strike>';
}
if (!indexUnderline && style.isUnderline()) {
indexUnderline = true;
result += '<u>';
} else if (indexUnderline && !style.isUnderline()) {
indexUnderline = false;
result += '</u>';
}
if (!indexBool && style.isBold()) {
indexBool = true;
result += '<b>';
} else if (indexBool && !style.isBold()) {
indexBool = false;
result += '</b>';
}
if (!indexItalic && style.isItalic()) {
indexItalic = true;
result += '<i>';
} else if (indexItalic && !style.isItalic()) {
indexItalic = false;
result += '</i>';
}
result += txt[i];
}
if (indexStrikethrough) {
result += '</strike>';
}
if (indexUnderline) {
result += '</u>';
}
if (indexBool) {
result += '</b>';
}
if (indexItalic) {
result += '</i>';
}
return result;
}
Usage
A1 = "My formatted example!!!"
A2 = =RICHTEXT_TO_HTML("A1")
A2 Result = My <i>formatted</i> <b>example</b>!!!
Working example
https://docs.google.com/spreadsheets/d/1mVvE8AdXYKSnaSIfRBrjfOeXxmTkVZovhguMZ3sc47M/edit?usp=sharing

Answer 2

I went ahead and updated this idea to better reflect how we do this is 2021.
/**
* #Author: Emma Sargent
* Rich Text to HTML.
* #param {Range} Google Sheets Range object
* #returns {string} Text as HTML.
* #customfunction
*/
function richTextToHtml(range) {
const runs = range.getRichTextValue().getRuns();
const formattedRuns = runs.map((run) => {
const attr = {
style: '',
};
const text = run.getText();
const link = run.getLinkUrl();
let parentTag = 'span';
if (link) {
parentTag = 'a';
attr.href = link;
}
const style = run.getTextStyle();
const styles = {
'font-family': `'${style.getFontFamily()}'`,
'font-size': `${style.getFontSize()}px`,
color: style.getForegroundColor(),
};
attr.style = Object.entries(styles)
.map(([key, val]) => `${key}: ${val}`)
.join('; ');
let tags = [];
if (style.isBold()) {
tags.push('b');
}
if (style.isItalic()) {
tags.push('i');
}
if (style.isUnderline()) {
tags.push('u');
}
if (style.isStrikethrough()) {
tags.push('strike');
}
const headTags = tags.length ? `<${tags.join('><')}>` : '';
const closeTags = tags.length ? `</${tags.join('></')}>` : '';
const attrStr = Object.entries(attr)
.map(([key, val]) => `${key}="${val}"`)
.join(' ');
const mainTag = `<${parentTag} ${attrStr}>${headTags}${text}${closeTags}</${parentTag}>`;
const lineBreakFormattedStr = mainTag.replace(/[\r\n]/g, '<br>');
return lineBreakFormattedStr;
});
return formattedRuns.join('');
}
And because someone emailed me and asked, here's a version that can be run as a custom function from the formula bar.
Spreadsheet formula: =richTextToHtml("YourSheetName!A1NotationRange")
function richTextToHtml(rangeStr) {
let [sheetName, rangeName] = rangeStr.split("!");
sheetName = sheetName.replaceAll("'",'');
const range = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName).getRange(rangeName);
const runs = range.getRichTextValue().getRuns();
const formattedRuns = runs.map((run) => {
const attr = {
style: '',
};
const text = run.getText();
const link = run.getLinkUrl();
let parentTag = 'span';
if (link) {
parentTag = 'a';
attr.href = link;
}
const style = run.getTextStyle();
const styles = {
'font-family': `'${style.getFontFamily()}'`,
'font-size': `${style.getFontSize()}px`,
color: style.getForegroundColor(),
};
attr.style = Object.entries(styles)
.map(([key, val]) => `${key}: ${val}`)
.join('; ');
let tags = [];
if (style.isBold()) {
tags.push('b');
}
if (style.isItalic()) {
tags.push('i');
}
if (style.isUnderline()) {
tags.push('u');
}
if (style.isStrikethrough()) {
tags.push('strike');
}
const headTags = tags.length ? `<${tags.join('><')}>` : '';
const closeTags = tags.length ? `</${tags.join('></')}>` : '';
const attrStr = Object.entries(attr)
.map(([key, val]) => `${key}="${val}"`)
.join(' ');
const mainTag = `<${parentTag} ${attrStr}>${headTags}${text}${closeTags}</${parentTag}>`;
const lineBreakFormattedStr = mainTag.replace(/[\r\n]/g, '<br>');
return lineBreakFormattedStr;
});
return formattedRuns.join('');
}
Demo sheet here: https://docs.google.com/spreadsheets/d/1X8I_lRXwoUXWRKb2hZPztDIPRs2nmXGtOuWmnrKWjAg/edit?usp=sharing

Answer 3

Thank you Eduardo Cuomo for the answer. I wanted to add the code to get down to the bottom line with a little fix.
/**
* #Author: Eduardo Cuomo
* Rich Text to HTML.
* #param {string} qRange Input text.
* #returns {string} Text as HTML.
* #customfunction
*/
function RICHTEXT_TO_HTML(qRange) {
var indexBool = false;
var indexItalic = false;
var indexUnderline = false;
var indexStrikethrough = false;
var sheet = SpreadsheetApp.getActiveSpreadsheet();
var range = sheet.getRange(qRange);
var cell = range;
var cellValue = cell.getRichTextValue();
var txt = String(cell.getDisplayValue());
var styles = cell.getTextStyles();
var result = '';
for (var i = 0; i < txt.length; i++) {
if(txt[i]=="\n"){
result += '<br>';
}else{
var style = cellValue.getTextStyle(i, i + 1);
if (!indexStrikethrough && style.isStrikethrough()) {
indexStrikethrough = true;
result += '<strike>';
} else if (indexStrikethrough && !style.isStrikethrough()) {
indexStrikethrough = false;
result += '</strike>';
}
if (!indexUnderline && style.isUnderline()) {
indexUnderline = true;
result += '<u>';
} else if (indexUnderline && !style.isUnderline()) {
indexUnderline = false;
result += '</u>';
}
if (!indexBool && style.isBold()) {
indexBool = true;
result += '<b>';
} else if (indexBool && !style.isBold()) {
indexBool = false;
result += '</b>';
}
if (!indexItalic && style.isItalic()) {
indexItalic = true;
result += '<i>';
} else if (indexItalic && !style.isItalic()) {
indexItalic = false;
result += '</i>';
}
result += txt[i];
}
}
if (indexStrikethrough) {
result += '</strike>';
}
if (indexUnderline) {
result += '</u>';
}
if (indexBool) {
result += '</b>';
}
if (indexItalic) {
result += '</i>';
}
return result;
}

Answer 4

Here's a version that creates more compact HTML (avoiding lots of spans setting styles):
function richTextToHtml(range) {
let lastFont = null, lastSize = null, lastColor = null, lastLink = null;
let parentClose = '';
return range.getRichTextValue()
.getRuns()
.map(run => {
const text = run.getText().replace(/[\r\n]/g, '<br>');
const style = run.getTextStyle();
const font = style.getFontFamily();
const size = style.getFontSize();
const color = style.getForegroundColor();
const link = run.getLinkUrl();
let mainTag = '';
if (font !== lastFont || size !== lastSize || color !== lastColor || link !== lastLink) {
mainTag += parentClose;
mainTag += link ? `<a href="${link}"` : '<span';
mainTag +=
` style="font-family:'${font}';font-size:${size}px;color:${color}">`;
parentClose = link ? '</a>' : '</span>';
lastFont = font;
lastSize = size;
lastColor = color;
lastLink = link;
}
let closeTags = '';
Object.entries({isBold: 'b', isItalic: 'i', isUnderline: 'u', isStrikethrough: 'strike'})
.filter(([getter, tag]) => style[getter]())
.forEach(([getter, tag]) => {
mainTag += `<${tag}>`;
closeTags = `</${tag}>${closeTags}`;
});
return `${mainTag}${text}${closeTags}`;
})
.join('') + parentClose;
}

Answer 5

You need to use getFontWeight properties of the Range to read these formating values. Example given here: GAS-check-cell-format
Check Rucent88's answer.