Wrap all numbers in a dynamic string into span

Design help Custom code
1

I have a cms field with strings such as…

“blue 25% red 25% grey 50%”

I would like to wrap the numbers (and % sign) into a span to give it a different style.

I’ve found a few javascript solutions to select every 2nd word (which in this case would work). I’m pretty in over my head though… this is what I’ve been trying in an embed with no luck.

<p>blue 25% red 25% grey 50%</p>

<script>

var p = $('p');
var text = p.text().split(' ');

for( var i = 1, len = text.length; i < len; i=i+2 ) {
    text[i] = '<span>' + text[i] + '</span>';
}
p.html(text.join(' '));

</script>

<style>
span {
    background: yellow;
}
</style>

Thanks in advance.

2

Something like this?

A few notes-

  • For the regex transform, you want to target what you’re transforming. an ID on the element, or a class or a custom attribute, whatever suits your need.
  • For styling, it’s generally best to apply your class directly on the SPAN so that you can later have multiple different patterns in the same text string, all styled differently. You might want dates, currency, etc.
  • Whatever class you assign, e.g. pct you can create in Webflow as a selector, and create your styling there. It will carry through. Just create a standard text item on a draft “Style Guide” page, with the pct class, and use that to manage your styling.
  • I haven’t tested the regex much. Adjust it as needed, there are a lot of good free regex replace testers online to help you work out the patterns you need.
3

Thank you so much for the detailed response! Works great :slight_smile:

4

For the rookies in the room like me. If you want to target the class instead of the id replace # with . wherever you see test in the example above :slight_smile:

1 Like
5

Follow up question if you have time…

So I’m applying this to some text in a collection list.

If I target using an ID, the regex transform is only applied to the first item in the list.
If I target using a class, the regex transform applies to everything, but it overwrites the text on all items to match the first item in the list.

Is there an order of operations I’m missing here?

Currently I’m applying the ID or the class to the text block.
Then I’m running the javascript above in site project settings - footer code.

I tried running the javascript in an embed right after the text block, but that didn’t seem to change anything at all.

Thanks again

6

When you’re doing a regex transform on HTML, you have a choice to make.

  1. You can iterate through a set of elements, e.g. using jQuery’s .each() iterator, and apply your regex to the contents of those elements one-at-a-time.
  2. Or, you can wrap the whole area of affect in a DIV with an ID of, e.g. transform-zone, and then just transform the entire HTML content of that element, including the HTML tags within.

The first one is slower, and a bit more code, but safer.

The second is much faster, but you risk breaking your HTML. It will depend on how good your regex skills are, and what you’re matching. In your case, it’s a little bit dangerous in that e.g. width=52% is totally valid in a style attribute. However your site is Webflow-based, which means it follows good design practices and uses classes rather than inline styling. You’re probably fine but I’d dig into your source a bit to make sure that area of your site won’t be affected by this approach.