Is it possible to search the contents of html files from another html page all within the same local-CodePudding

So if given an offline webapp made up of html5/css/js with standard directories of {[Main Folder] > 0001.html, 0002.html, 0003.html, {[assets folder] > [css],[js],[media]}} is it possible for a search function on 1.html to be able to search the text content of 2.html or 3.html?

I haven't been able to find any specific information about this as most searching people do for a site are for sites intended to be houses on server, but in the case of an offline webapp the files are stored locally which causes a big hangup as webapi REALLY doesnt like a webpage looking at local files, but any images and links are able to be references through the href tag, so is it possible to search the contents of an html file specified through an href?

if given sample html pages:

0001.html

<!DOCTYPE html>
<body>

<div >
    <div >
        <input type="text" id="searchInput" ><button id="clear" >Clear</button>
        <button type="button" id="button" >Search</button>    
    </div>
    <div id="searchResults" ></div>
</div>
</body>

0002.html

<!DOCTYPE html>
<body>

<div id="content">
  <p>lorem ipsum</p>
</div>
</body>

Is it possible to search the contents of 0002.html while on 0001.html?

The reason i didn't include more robust markup and js above is that we are working on proprietary html ebooks built in InDesign and exported to html5. our current method of searching involves using a script in InDesign that parses every text box on every page and generates a dictionary that looks something like:

var searchDictionary = {
    "Turtle": [1, 2],
    "Fish": [2, 3],
    "Fox": [3, 4],
    "Snake": [4, 5],
    "Dragon": [1, 5]
}

Where the content in "" is a term and the associated array are the page numbers that terms appears on, then you search that dictionary with the following js and return the page numbers that term appears on, which i coded up to pull in a pre-existing thumbnail and create a link to click through to the page:

document.getElementById("button").addEventListener("click", function () {
  var query = document.getElementById("searchInput").value.toLowerCase();
  var pages = searchDictionary[query];
    if (pages === undefined) {
      document.getElementById('searchResults').innerHTML = '<p style = \"text-align:center;width:100%\"> Term Not Found </p>';
    }
    else {
      html = ""  
      html  = '<ul>';
      pages.forEach(showResults);
      html  = '</ul>';    
    }
}, false);
function gotopage(destinationpageNumber) {
    var currentpagenumber = $('.page').attr('data-name');
    currentpagenumber = parseInt(currentpagenumber);
    destinationpageNumber = parseInt(destinationpageNumber.split(' ')[1]);
    var distance = destinationpageNumber - currentpagenumber;
    var offset = currentpagenumber - nav.current;
    nav.to(nav.current distance);
}
function showResults(value) {
    var pageNum = value.toString();
    var thumbMid = pageNum.padStart(4,0);
    var thumb = '<img src=\"assets/images/pagethumb_'   thumbMid   '_0.jpg\" class=\"searchThumb\">';
    var result = "<button id=\"goto\"   class=\"gotopagebutton\">pg. "  value   "</br>"   thumb   "</button>";
    html  = '<li class=\"result\">'   result   '</li>';
    document.getElementById('searchResults').innerHTML = html;
    var gotopagebuttons = document.getElementsByClassName('gotopagebutton');
    for (var i = 0; i < gotopagebuttons.length; i  ) { 
        gotopagebuttons[i].addEventListener('click', gotopage.bind(null, gotopagebuttons[i].innerHTML));
    };
}

CodePudding user response：

You can make another file that could get the data from each of the files and attempt to filter it (https://www.w3schools.com/howto/howto_js_filter_lists.asp)

CodePudding user response：

You can use fetch to open the file then use .text instead of .json. Then just search that text.

<script>
    fetch('0002.html').then(function (response) {
        return response.text();
    }).then(function (html) {
        console.log(html.includes("ipsum"))
    }).catch(function (err) {
        console.warn('Something went wrong.', err);
    });
</script>