Make a DOM element searchable.
<div be-searching=calif>
Supercalifragilisticexpialidocious
</div>generates:
<div be-searching=calif>
Super<mark data-from=be-searching>calif</mark>ragilisticexpialidocious
</div><div be-searching='{
"forText": "calif",
"attribs":{
"class": "hilite"
},
"tag": "span"
}'>
Supercalifragilisticexpialidocious
</div>generates:
<div be-searching='{
"forText": "calif",
"attribs": {
"class": "hilite"
},
"tag": "span"
}'>
Super<span class=hilite>calif</span>ragilisticexpialidocious
</div>Editing JSON-in-html can be rather error prone. A VS Code extension is available to help with that, and is compatible with web versions of VSCode.
Use be-searching in partnership with be-linked.
<input type=search>
<div
be-linked='
On input event of previous element sibling pass value property to $0+beSearching:forText.
'
>
<div>
supercalifragilisticexpialidocious
</div>generates:
<div is-searching='{
"forValueFrom": {
"observe": "input",
}
}>
Super<mark>calif</mark>ragilisticexpialidocious
</div>
If you prefer small, byte sized words:
<input type=search>
<div
be-linked='
On input event of previous element sibling pass value property to $0-enh-by-be-searching : for text.
'>
<div>
supercalifragilisticexpialidocious
</div>caseSensitive regex [TODO] wholeWord [TODO] beVigilant [TODO] recursive [TODO]
beVigilant will add a mutation observer.
Any web server that can serve static files will do but...
- Do a git clone or a git fork of repository https://github.com/bahrus/be-searching
- Install node.js
- Run "npm install" from location of folder created in step 1.
- Run npm run serve. Open browser to http://localhost:3030/demo/
import 'be-searching/be-searching.js';<script type=module crossorigin=anonymous>
import 'https://esm.run/be-searching';
</script>
