Input data: there is a text string containing html markup and some liquid code (example):
{% case delivery_method %}
{% when 'pick-up' %}
You’ll receive an email when your order is ready for pickup.
{% when 'local' %}
Hi {{ customer.first_name }}, we're getting your order ready for delivery.
{% else %}
Hi {{ customer.first_name }}, we're getting your order ready to be shipped. We will notify you when it has been sent.
{% endcase %}
{% if delivery_instructions != blank %}
<p><b>Delivery information:</b> {{ delivery_instructions }}</p>
{% endif %}
{% endif %}
{% endcapture %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
</style>
</head>
<body>
<table class="body">
<tr>
<td>
<table class="header row">
<tr>
<td class="header__cell">
<center>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>
<td class="order-number__cell">
<span class="order-number__text">
Order {{ order_name }}
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>
<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>
{% if order_status_url %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
</tr>
</table>
{% endif %}
</td>
</tr>
</table>
{% else %}
{% if shop.url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
</tr>
</table>
</td>
</tr>
Task: Cut the tags and the liquid template code into an array, leaving the text (replacing them with "\n"), and then paste them back in order without changing the initial text.
My trying example with html:
const getTags = (text) => {
const tags = text?.match(/(\n)|<\/?[^>]+(>|$)/g);
if (!tags) {
return [];
}
return tags;
};
const clearTags = (text) => text?.replace(/<\/?[^>]+(>|$)/g, "\n");
const insertTags = (text, tags) => {
if (tags.length === 0) {
return text;
}
// insert tags
tags.forEach((tag) => {
const indexOfReplacement = text.indexOf("\n");
if (indexOfReplacement !== -1) {
if (tag === "\n") {
// leave original \n
text = text.replace(/\n/, "\x00");
} else {
// replace "\n" with html tag
text = text.replace(/\n/, tag);
}
}
});
// Fix original "\n"
return text.replace(/\x00/g, "\n");
};
Explanation:
const textWithHtmlLiquid = `<p class="plain_text">Test text: have a good <span class="red">day</span>!</p>
{% when 'local' %}
Hi {{ customer.first_name }}, we're getting your order ready for delivery.
{% else %}`;
const tags = getTagsLiquid(textWithHtmlLiquid);
//Output: tags = [`<p class="plain_text">`, `<span class="red">`, `</span>`, `{% when 'local' %}`...etc ]
const clearedText = clearText(textWithHtmlLiquid);
//Output: "\nTest text: have a good \nday\n!</p>
\n
Hi \n, we're getting your order ready for delivery.
\n";
const textWithInsertedTagsLiquid = insertTagsLiquid(tags, clearedText)
//Output: Same text as insertTagsLiquid
I really need help, I've been struggling with this for a week now.