<p>There are several possibilites to solve this. The fastest, as you said, is a regular expression, but those always come with limitations and potential performance issues. You can make this very simple or very complicated – it depends on how many of those special formatting options you want to include for your fields, and how often they will be used.</p>
<p>For a 'full' solution, you're looking at something like <a href="https://kinsta.com/blog/wordpress-shortcodes/" rel="nofollow noreferrer">WordPress shortcodes</a>. Those come with start and end tags, shortocde attributes and nested shortcodes. But you're probably not gonna need that much.</p>
<hr />
<p>Let's consider a simple solution. For a start, I highly recommend using different symbols to denote start and end of the highlighting. Otherwise, you're entering a world of pain – the regex is gonna break if your editors want to highlight multiple phrases in the same field. I would suggest something like this:</p>
<pre><code>Website laten maken {Amsterdam}
</code></pre>
<p>Given this syntax, you don't even need RegEx:</p>
<pre class="lang-twig prettyprint-override"><code>{% set text = '&lt;h1&gt;Website&lt;/h1&gt; laten maken {Amsterdam}' %}
{{ text|replace({
    '{': '&lt;span class=&quot;text-outline&quot;&gt;',
    '}': '&lt;/span&gt;',
})|striptags('&lt;span&gt;') }}
</code></pre>
<p>Note the <code>striptags</code> at the end that only allows <code>&lt;span&gt;</code> tags – this prevents your editors from entering raw HTML (otherwise you'd have to use the <code>raw</code> filter to prevent the span tags from being escaped).</p>
<p>If at some point you need to allow literal brackets (<code>{</code>, <code>}</code>) in the text, you can just use multiple brackets as delimiters instead: <code>{{{</code>, <code>}}}</code></p>
<p>For comparison, here's the same replacement done with RegEx, which allows you to better handle some edge-cases (like start delimiters without a matching end delimiter or vice-versa):</p>
<pre class="lang-twig prettyprint-override"><code>{% set text = 'Website laten maken {Amsterdam}' %}
{{ text|replace(
    '/\{([^\}]+)\}/',
    '&lt;span class=&quot;text-outline&quot;&gt;$1&lt;/span&gt;',
)|striptags('&lt;span&gt;') }}
</code></pre>
<p>To make this reusable, I would put that function in a <a href="https://craftcms.com/docs/3.x/extend/extending-twig.html#register-a-twig-extension" rel="nofollow noreferrer">custom Twig extension</a> so it can be used everywhere.</p>

CC BY-SA 4.0
2021-10-26T09:51:48.540Z
2021-10-26T13:46:05.470Z
2021-10-26T13:46:05.470Z
MoritzLost
<p>You can use replace with regex also, maybe like this :</p>
<pre><code>{{ &quot;Website laten maken *Amsterdam*&quot;|replace('/\\*([^\\s][^*\\n]+[^\\s])\\*/', '&lt;span class=&quot;text-outline&quot;&gt;$1&lt;/span&gt;')|raw }}
</code></pre>
<p>You can wrap this code inside <a href="https://twig.symfony.com/doc/3.x/tags/macro.html" rel="nofollow noreferrer">macro</a>, so you can reuse the code.</p>

CC BY-SA 4.0
2021-10-26T09:48:41.807Z
2021-10-26T09:48:41.807Z
aodihis
<p>I'm working on a Craft CMS website and I need help with formatting the H1 tag.</p>
<p>I would like to be able to easily outline some parts of the title, like in the example below.</p>
<p>Ideally by adding an asterisk (*) to the actual title, like so:</p>
<p><code>Website laten maken *Amsterdam*</code></p>
<p>I already have the HTML set up, which just uses a span with a class:</p>
<p><code>&lt;h1&gt;Website laten maken &lt;span class=&quot;text-outline&quot;&gt;Amsterdam&lt;/span&gt;&lt;/h1&gt;</code></p>
<p>I've already tried to replace the asterisks with the span by using Twig's <code>replace</code> but this didn't work with replacing the closing tag.</p>
<p>Is there a way (for example a regex) that allows me to do this? And is there a way to wrap this in a function so I can reuse it?</p>
<p>Many thanks!</p>
<p><a href="https://i.sstatic.net/95Pek.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/95Pek.png" alt="Example of what I want to do" /></a></p>

<templating>
Replace asterisk (*) with my own HTML in twig-templates
# Replace asterisk (*) with my own HTML in twig-templates

(Asked by: username_0 on 2021-10-26)

I'm working on a Craft CMS website and I need help with formatting the H1 tag.

I would like to be able to easily outline some parts of the title, like in the example below.

Ideally by adding an asterisk (\*) to the actual title, like so:

`Website laten maken *Amsterdam*`

I already have the HTML set up, which just uses a span with a class:

`# Website laten maken Amsterdam`

I've already tried to replace the asterisks with the span by using Twig's `replace` but this didn't work with replacing the closing tag.

Is there a way (for example a regex) that allows me to do this? And is there a way to wrap this in a function so I can reuse it?

Many thanks!

[![Example of what I want to do](https://i.sstatic.net/95Pek.png)](https://i.sstatic.net/95Pek.png)

**Tags:** templating

---

## 2 answers

### Answer by username_1 on 2021-10-26. Score: 2 | Accepted answer

There are several possibilites to solve this. The fastest, as you said, is a regular expression, but those always come with limitations and potential performance issues. You can make this very simple or very complicated – it depends on how many of those special formatting options you want to include for your fields, and how often they will be used.
For a 'full' solution, you're looking at something like WordPress shortcodes. Those come with start and end tags, shortocde attributes and nested shortcodes. But you're probably not gonna need that much.

Let's consider a simple solution. For a start, I highly recommend using different symbols to denote start and end of the highlighting. Otherwise, you're entering a world of pain – the regex is gonna break if your editors want to highlight multiple phrases in the same field. I would suggest something like this:
Website laten maken {Amsterdam}

Given this syntax, you don't even need RegEx:
{% set text = 'Website laten maken {Amsterdam}' %}
{{ text|replace({
    '{': '',
    '}': '',
})|striptags('') }}

Note the striptags at the end that only allows  tags – this prevents your editors from entering raw HTML (otherwise you'd have to use the raw filter to prevent the span tags from being escaped).
If at some point you need to allow literal brackets ({, }) in the text, you can just use multiple brackets as delimiters instead: {{{, }}}
For comparison, here's the same replacement done with RegEx, which allows you to better handle some edge-cases (like start delimiters without a matching end delimiter or vice-versa):
{% set text = 'Website laten maken {Amsterdam}' %}
{{ text|replace(
    '/\{([^\}]+)\}/',
    '$1',
)|striptags('') }}

To make this reusable, I would put that function in a custom Twig extension so it can be used everywhere.


---

### Answer by username_2 on 2021-10-26. Score: 2

You can use replace with regex also, maybe like this :
{{ "Website laten maken *Amsterdam*"|replace('/\\*([^\\s][^*\\n]+[^\\s])\\*/', '$1')|raw }}

You can wrap this code inside macro, so you can reuse the code.


---

