Loading innerText of multiple HTML files without loading the file in the DOM

Help Requests
1

Is it possible to load the innerText multiple HTML files into an array? I creating a simple search engine for a project and can only make it work in a very ugly way:

In the view repeating over an array that contains the full paths to the .html files that I want to be able to search.
Results.html:
<div repeat.for="helpfile of fullResults"> <div show.bind="false" id="url${$index}" as-element="compose" view="${helpfile.url}"></div>

After the DOM is loaded I can then search the document for unique Id’s and save the innertext of the files into the array.
Results.ts:
this.fullResults.forEach((x, index) => { x.searchtext = document.getElementById("url" + index).innerText.toLowerCase(); });

Does Aurelia have a loader/class/method etc. to do this more nicely without going back and forth between the View and View-Model? If someone has a better solution, hopefully you can point me in the right direction :slight_smile:

Thanks!

2

I’d recommend going with a server side solution if possible since speed will always be an issue if you are pulling every file to the client to search it, unless all of these files are already client side and you have access to the html.

If it is client side there is the DOMParser class if you have the html in string form.

doSuff() {
   var document = this.generateDocument('<div id="something"></div>');
   var element = document.getElementById('something');
   // Do stuff
}

generateDocument(html) {
   return new DOMParser().parseFromString(
      '<!doctype html><body>' + html, 
      'text/html'
   );
}