dom-replacer
v0.1.0
Published
A small lib to replace text asynchronously (or not) in the HTML
Downloads
5
Readme
Replacer
A small lib to replace text asynchronously (or not) in the HTML.
Installation
For the moment you can download replacer.js that is inside src
folder and include in your HTML files.
Usage
The best way you can use this lib is executing the code right after the opening of the body
tag. This way you avoid seeing "raw" texts with the marks for a second before it is replaced.
Once the DOM is ready, create a new Replacer
instance then call run
and the magic will begin.
<body>
<script>
// make sure it's being executed after DOM is ready
var replacer = new Replacer('replacer');
replacer.run();
</script>
</body>
Plese keep reading for more configuration and details.
In our example above, Replacer
will look for every tag with replacer
CSS class and will try to rewrite every text marked by ;
in the beginning and the end of a word. For example:
<p>
Some ;example; text
</p>
will become:
<p>
Some example text
</p>
This is the default behavior of the lib. To make it really useful we should change some settings, informing an object with keys and values either to the constructor
or the run
method.
<body>
<script>
// make sure it's being executed after DOM is ready
var replacer = new Replacer(cssClass, options);
replacer.run(options);
</script>
</body>
Notice that options informed to the run
method will have preference over the constructor and will not replace the settings informed to constructor
.
cssClass
: A CSS class existent in the HTML that marks inside which HTML element Replacer
should search for words/phrases. Different of what we are used to write in jQuery selectors or even javascript querySelector
, you can't inform the class beginning with the dot. For example, '.replacer'
would throw errors.
options
: All the possible configuration options with the default values:
var options = {
template: ';content;',
newElement: function (text, elements) {
return text;
}
};
template
: Here we make a "mark" so we can search for it in the elements inside the one that was selected with the CSS class (replacer in the example).content
represents a word or a phrase. By default we look for a word/phrase that is between two semi-colons and no spaces between the semi-colons and thecontent
. You could change it to=%content%=
, for example. Then every word/phrase that begins with=%
and ends with%=
will be rewritten to what we have innewElement
.newElement
: Here you can implement a callback that returns what will be placed over the texts found in the HTML following thetemplate
.
The callback receives two parameters: text
and elements
.
text
contains the word/phrase without the marks of the template. If you didn't change the default template,text
will containcontent
without the semi-colons (;
).elements
is a reference to a nodeList. Here we have all the elements found in the search. Changing this elements will cause change in the HTML. The default behavior is to only remove the semi-colons, once the default function only returnstext
. You can make this function make asynchronous calls and return the result right after the call ends and the elements will be replaced asynchronously too.
License
MIT License.