Strip <style> tags with liquid

CMS > Content Modules
1

I have a client copy an pasting press releases into the blog module. Today when she did so she managed to grab a tag as well.

In my list view I have a the first 15 words of the press release with a liquid | strip_html filter . The actual “” tags were removed, but the content of the style tags were not. So in the preview I say raw CSS. Anybody know a way to strip out the contents of the style tags with liquid?

Apparently somebody included a fix for this in liquid in 2013 https://github.com/Shopify/liquid/issues/114

I found that somebody wrote some liquid to remove spans, but I’m not sure I understand it enough to modify it.

{% assign descArr = product.description | remove: "<span>" | split: "<span" %}
{% assign desc = "" %}
{% assign count = 0 %}

{% for span in descArr %}
  {% assign count = count | plus: 1 %}
  {% assign thisSpan = span | strip %}
  {% if thisSpan contains "</span>" %}
    {% assign thisSpan = thisSpan | remove: "</span>" %}
    {% if count > 1 %}
      {% assign lastChar = thisSpan | slice: -1 %}
      {% assign thisSpan = thisSpan | split: ">" %}
      {% assign length = thisSpan | size | minus: 1 %}
      {% assign thisSpan = thisSpan | slice: 1, length %}
      {% assign thisSpan = thisSpan | join: '>' %}
      {% if lastChar == ">" %}
        {% assign thisSpan = thisSpan | append: ">" %}
      {% endif %}
    {% endif %}
  {% endif %}
  {% assign desc = desc | append: thisSpan %}
{% endfor %}
{{ desc }}

Also, I thought there was an option to clean HTML in the WYSIWYG editor, but I can’t find it right now.

I’ve previously asked clients to copy and paste text into a notepad/TextEdit. But in this case it doesn’t seem to be working. The style tag stays intact somehow.

In the mean time I’ve told my client to use a html cleaner site

Any help appreciated.

2

If you copy & paste from Word then a dialogue box appears to give you the option to clean the html.

1 Like
3

Behold , I give you:
image
:slight_smile:

Weird that the fix hasn’t worked in this situation though… however it may not be applied to the .NET version Treepl uses… might be worth the devs having a look at this.

Also I personally would stay clear of the above liquid code… You want to keep spans and such… Between the fix and the clear formatting button , it should cover your bases. That and clients previewing their own work before they hit save ha

1 Like
4

Yeah, not really what Liquid is designed to do.
Something like this might work though (providing the style tag always comes first there aren’t multiple style tags):

{% capture description %}
<style>
    .mycss {
        color: #000;
    }
</style>
<h1>Title</h1>
<p>Paragraph...</p>
{% endcapture %}

{% assign descriptionArray = description | split: '/style>' %}

{% if descriptionArray[1] != null %}
{{descriptionArray[1]}}
{% else %}
{{descriptionArray[0]}}
{% endif %}

The ‘description’ I’m capturing is example data which would otherwise come directly from your this.description field (or other module property)

But doing this sort of thing could have unexpected results :slight_smile:

1 Like
5

@hopestew Thank you. In my tests I found that the dialog didn’t remove the contents of the style tag.

@James Thanks for being my eyes :slight_smile:

What exactly does that button do? I tried it on a few snippets and it didn’t seem to make much of a difference. It doesn’t strip inline code… it doesn’t do much.
I always assumed it would strip everything and just take you back to base p tags or something.

@Adam.Wilson Thank you for parsing that code. I think I am going to steer clear of it. The client grabs these news releases from a number of places, and so it’s difficult top know exactly what might be in there. There are just too many variables at the end of the day to take into account.

I think the solution might just be more client training.

1 Like