Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-10-26T09:51:48.540Z
Answers.LastActivityDate: 2021-10-26T13:46:05.470Z
Answers.LastEditDate: 2021-10-26T13:46:05.470Z
Answers.UserDisplayName: MoritzLost
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-10-26T09:48:41.807Z
Answers.LastActivityDate: 2021-10-26T09:48:41.807Z
Answers.UserDisplayName: aodihis
Body: <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>
  
Tags: <templating>
Title: Replace asterisk (*) with my own HTML in twig-templates
ThreadText: # 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:
  
  `<h1>Website laten maken <span class="text-outline">Amsterdam</span></h1>`
  
  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](https://kinsta.com/blog/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:
  
  ```twig
  {% set text = '<h1>Website</h1> laten maken {Amsterdam}' %}
  {{ text|replace({
      '{': '<span class="text-outline">',
      '}': '</span>',
  })|striptags('<span>') }}
  
  ```
  
  Note the `striptags` at the end that only allows `<span>` 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):
  
  ```twig
  {% set text = 'Website laten maken {Amsterdam}' %}
  {{ text|replace(
      '/\{([^\}]+)\}/',
      '<span class="text-outline">$1</span>',
  )|striptags('<span>') }}
  
  ```
  
  To make this reusable, I would put that function in a [custom Twig extension](https://craftcms.com/docs/3.x/extend/extending-twig.html#register-a-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])\\*/', '<span class="text-outline">$1</span>')|raw }}
  
  ```
  
  You can wrap this code inside [macro](https://twig.symfony.com/doc/3.x/tags/macro.html), so you can reuse the code.
  
  
  ---
  
  