How do I solve a strange problem with VHS ViewHelper v:replace?

I have an array ('db-titles') whose items are strings composed in the form 'TextA*TextB'. I want to create the following HTML structure from these array items: <span>TextA</span><span>TextB</span>

For this I use the following fluid script:

{namespace v=FluidTYPO3\Vhs\ViewHelpers}

<f:if condition="{db-titles -> f:count()} > 1">

  <f:then>

     <!-- This works as expected, the html code will be rendered correctly -->
     <v:iterator.for from="0" to="{db-titles -> f:count()}" iteration="i">
        <span><v:format.replace content="{db-titles.{i.index}}" substring="*" replacement="</span><span>"/></span>
     </v:iterator.for>

  </f:then>

  <f:else> 
       <!-- This strangely does not work, although I - instead of running through all values of the array - just want to output the first value of it.... -->      
       <span><v:format.replace content="{v:iterator.first(haystack: db-titles)}" substring="*" replacement="</span><span>"/></span>
  </f:else>

</f:if>

As I commented in the source code, everything works as it should under '<f:then>', but under '<f:else>', where I only want to use the first value of the array, the replaced part ('*' to </span><span>) is strangely rendered as text instead of HTML: <span>TextA&lt;/span&gt;&lt;span&gt;TextB</span>

How can this be?

Let me mention that I use the app "PHPStorm" for programming - is it possible that the program renders the source code wrong?

Thanks in advance for any help!

Without having found an explanation for the strange behaviour, I have found an solution: wrapping <v:format.replace ... /> with <f:format.raw> ... </> prevents that the tags converted to strings.

<f:if condition="{db-titles -> f:count()} > 1">

  <f:then>
     <v:iterator.for from="0" to="{db-titles -> f:count()}" iteration="i">
        <span><f:format.raw><v:format.replace content="{db-titles.{i.index}}" substring="*" replacement="</span><span>"/></f:format.raw></span>
     </v:iterator.for>
  </f:then>

  <f:else>       
     <span><f:format.raw><v:format.replace content="{v:iterator.first(haystack: db-titles)}" substring="*" replacement="</span><span>"/></(f:format.raw></span>
  </f:else>

</f:if>