@brunoschmello/replacer
v0.1.0
Published
A small lib to replace text asynchronously (or not) in the HTML
Downloads
4
Readme
Replacer
A small lib to replace text asynchronously (or not) in the HTML.
Installation
You can install Replacer via NPM.
npm install dom-replacer
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).contentrepresents 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.
textcontains the word/phrase without the marks of the template. If you didn't change the default template,textwill containcontentwithout the semi-colons (;).elementsis 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.