Filters

Maizzle includes filters that enable you to do anything you want to text inside elements that you mark with custom attributes.

Usage

Add a filters object to your Maizzle config:

module.exports = {
  filters: {}
}

Each entry in this object is made up of a key: value pair.

• key represents a custom HTML attribute name
• value is a function that accepts two arguments, and must return a string

Example:

module.exports = {
  transform: {
    uppercase: str => str.toUpperCase()
  }
}

Used in a Template:

<p uppercase>Here is some foo.</p>

Result:

<p>HERE IS SOME FOO BAR.</p>

Of course, this is just a dumb example - you could imagine more complex scenarios where you pull in packages and do stuff like:

• compile CSS in some <style> tag with Sass or others
• normalize html whitespace in parts of your code
• create various content filters
• ...

Default filters

The following filters are included by default.

append

Append text to the end of the string.

<div append=" bar">foo</div>
<!-- <div>foo bar</div> -->

prepend

Prepend text to the beginning of the string.

<div prepend="foo ">bar</div>
<!-- <div>foo bar</div> -->

uppercase

Uppercase the string.

<div uppercase>foo</div>
<!-- <div>FOO</div> -->

lowercase

Lowercase the string.

<div lowercase>FOO</div>
<!-- <div>foo</div> -->

capitalize

Uppercase the first letter of the string.

<div capitalize>foo</div>
<!-- <div>Foo</div> -->

ceil

Round up to the nearest integer.

<div ceil>1.2</div>
<!-- <div>2</div> -->

floor

Round down to the nearest integer.

<div ceil>1.2</div>
<!-- <div>1</div> -->

round

Round to the nearest integer.

<div round>1234.567</div>
<!-- <div>1235</div> -->

escape

Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example).

<div escape>"&'<></div>
<!-- <div>&#34;&amp;&#39;&lt;&gt;</div> -->

escape-once

Escapes a string without changing existing escaped entities.

<div escape-once>1 &lt; 2 &amp; 3</div>
<!-- <div>1 &lt; 2 &amp; 3</div> -->

lstrip

Remove leading whitespace from the string.

<div lstrip> test </div>
<!-- <div>test </div> -->

rstrip

Remove trailing whitespace from the string.

<div rstrip> test </div>
<!-- <div> test</div> -->

trim

Remove leading and trailing whitespace from the string.

<div trim> test </div>
<!-- <div>test</div> -->

minus

Subtracts one number from another.

<div minus="2">3</div>
<!-- <div>1</div> -->

plus

Adds one number to another.

<div plus="2">3</div>
<!-- <div>5</div> -->

multiply

Alias: times

<div multiply="2">1.2</div>
<!-- 2.4 -->

divide-by

Alias: divide

<div divide-by="2">1.2</div>
<!-- 0.6 -->

modulo

Returns the remainder of one number divided by another.

<div modulo="2">3</div>
<!-- 1 -->

newline-to-br

Insert an HTML line break (<br />) in front of each newline (\n) in a string.

<div newline-to-br>
  test
  test
</div>
<!-- <div><br>  test<br>  test<br></div> -->

strip-newlines

Remove any newline characters (line breaks) from the string.

<div strip_newlines>
  test
  test
</div>
<!-- <div>  test  test</div> -->

remove

Remove every occurrence of text from the string.

<div remove="rain">I strained to see the train through the rain</div>
<!-- <div>I sted to see the t through the </div> -->

remove-first

Remove the first occurrence of text from the string.

<div remove-first="rain">I strained to see the train through the rain</div>
<!-- <div>I sted to see the train through the rain</div> -->

replace

Replace every occurrence of the first argument with the second argument.

You must separate arguments with a pipe character (|).

<div replace="1|test">test</div>
<div>1es1</div>

replace-first

Replace the first occurrence of the first argument with the second argument.

You must separate arguments with a pipe character (|).

<div replace-first="t|b">test</div>
<div>best</div>

size

Return the number of characters in the string.

<div size>one</div>
<!-- <div>3</div> -->

slice

Return a slice of the string starting at the provided index.

<div slice="1">test</div>
<!-- <div>est</div> -->

You may pass a startIndex and endIndex:

<div slice="0,-1">test</div>
<!-- <div>tes</div> -->

truncate

Shorten a string down to the number of characters passed as the argument.

<div truncate="17">Ground control to Major Tom.</div>
<!-- <div>Ground control to...</div> -->

You may pass a custom ellipsis as the second argument.

Separate arguments with a comma:

<div truncate="17, no one">Ground control to Major Tom.</div>
<!-- <div>Ground control to no one</div> -->

truncate-words

Shorten a string down to the number of words passed as the argument.

<div truncate-words="2">Ground control to Major Tom.</div>
<!-- <div>Ground control...</div> -->

You may pass a custom ellipsis as the second argument.

Separate arguments with a comma:

<div truncate-words="2, over and out">Ground control to Major Tom.</div>
<!-- <div>Ground control over and out</div> -->

url-decode

Decode a string that has been encoded as a URL.

<div url-decode>%27Stop%21%27+said+Fred</div>
<!-- <div>'Stop!' said Fred</div> -->

url-encode

Convert any URL-unsafe characters in a string into percent-encoded characters.

<div url-encode>user@example.com</div>
<!-- <div>user%40example.com</div> -->