JS emulates browser to implement global search function

It is necessary to search for the corresponding value of the specified module like the browser's global search, and then add the matching content to the background color, etc.

Ideas

• All contents of the currently specified area need to be retrieved
  
• Then find the searched content and add the corresponding background color in the retrieved content
  
• Finally, render the modified content on the page
  

accomplish

• Use innerHTML to get the content of the corresponding module
• Write the corresponding regular expression to match the searched content
• Replace matching content
• Finally rendering to the page
  

Code implementation:

let wrap = ('.wrap');
let innerHTML = ;
let reg = new RegExp(query, 'g');
innerHTML = (reg, '<span style="color: #000; background-color: #e3e4e5">' + query + '</span>');
 = innerHTML;

The specific implementation of the search is completed, but the above code still has a flaw, that is, when replacing the search content, the previously searched content still has the selected style, so the next function is improved:

let preQuery = ''; // The last searched contentlet wrapDom = ''; // Search for dom elements in the areafunction searchFn(dom, query) {
  let wrap = wrapDom || (dom);
  let innerHTML = ;
  if (!preQuery) {
    let preReg = new RegExp('<span style="color: #000; background-color: #e3e4e5">' + preQuery + '</span>', 'g');
    innerHTML = (preReg, preQuery);
  }
  if (query) {
    let reg = new RegExp(query, 'g');
    innerHTML = (reg, '<span style="color: #000; background-color: #e3e4e5">' + query + '</span>');
  }
   = innerHTML;
  preQuery = query;
}

So far, the search and highlighting function has been implemented.

Things to note

The title attribute cannot be used in the dom element in the search area, because when the title attribute is used, the corresponding title attribute content will also be replaced, which will cause problems when rendering the page. In fact, the regular expression that matches the rules can be rewrite, but the ability is limited, and I don’t know how to write regular expressions that exclude title attributes.

If you write it using a framework such as Vue, all the events and attributes related to vue will be invalid after searching, because we directly replaced the dom. In this case, there are two solutions:

After the search is completed, instantiate vue again

function resetVm() {
  ()
  vm = new Vue({...})
}

But there will be a problem like this. After re-instance of the vue instance, the search content will be gone.

Without using vue, you can use jQuery to implement the page, so that there will be no problem of event failure.

Summarize

The above is the JS simulation browser that the editor introduced to you to implement the global search function. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!