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 namevalue
is a function that accepts two arguments, and must return a string
Example:
module.exports = {
filters: {
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> -->