Search Current Html Page

by merganser

HTML

<body class="section_header_body_no_scroll">

  <h1>
    Hello
  </h1>
  <form id="searchForm" action="javascript:search();">
    Search For: <input id="searchItem" type="text" value="" />
    <button id="go" class="btn btn-default" type="button" onclick="document.getElementById('searchForm').submit(); return false;">Go
    </button>
  </form>
  <p>
    Some content goes here. Find the value in <input type="text" value="test 123" />
  </p>
</body>

JavaScript

const parseHTMLString = (() => {
  const parser = new DOMParser();
  return str => parser.parseFromString(str, "text/html");
})();

const getSearchStringForDoc = doc => {
  return [
    doc.title,
    doc.body.innerText
  ].map(str => str.trim())
   .join(" ");
};

const stringMatchesQuery = (str, query) => {
  str = str.toLowerCase();
  query = query.toLowerCase();
  
  return query
    .split(/\W+/)
    .some(q => str.includes(q))
};

const htmlStringMatchesQuery = (str, query) => {
  const htmlDoc = parseHTMLString(str);
  const htmlSearchString = getSearchStringForDoc(htmlDoc);
  //console.log("htmlSearchString: ", htmlSearchString)
  
  return stringMatchesQuery(htmlSearchString, query);
};

function search()
{
  //var bodyContent = document.getElementsByClassName("section_header_body_no_scroll")[0];
  var htmlString = document.body.innerHTML;
  var searchValue = document.getElementById("searchForm").elements["searchItem"].value;
  
  //console.log(htmlString);
  console.log("Match '"+searchValue+"':", htmlStringMatchesQuery(htmlString, searchValue));

  strFound=self.find(searchValue);
  console.log("find '"+searchValue+"':", strFound);

}