如何将液体模板中的十六进制值与正则表达式匹配？

Question

想要的结果

内容编辑者可以在 Shopify 中输入十六进制值作为背景色。如果给定的输入是有效的十六进制，您如何检查 Liquid 模板的控制流？

需要实现的正则表达式：

^#(?:[0-9a-fA-F]{3}){1,2}$

应添加的 Liquid 片段：

<div class="a-module" style="background-color: {{ bg_color }};">
  ...
</div>

变量 bg_color 只能是十六进制，包括井号 # 字符。

如何使用正则表达式实现上述内容？

其他解决方案？

如果这不可能，还有哪些其他方法可以匹配液体模板中的字符串？

研究

我在 liquid 模板中找不到太多关于正则表达式的信息。

存在这个问题：

但是我不明白它是如何实现的。

Answer 1

创建您自己的过滤器怎么样。并在此过滤器中检查十六进制。

/^#[0-9a-f]{3,6}$/igm

Answer 2

Shopify liquid 中没有正则表达式，因此无法通过这种方式进行检查。

更好的方法是使用 color filters.

之一

你可以这样做：

{% assign is_color = bg_color | color_to_rgb  %}
{% if is_color %}
  It's color
{% endif %}

如果颜色有效，它将 return rgb 输出，但如果不是，它将 return null 结果使变量为假。

如果你真的需要使用正则表达式，唯一的选择是依赖 Javascript 并在 DOM 准备好后处理它。

How to match a hexadecimal value in liquid templates with regex?