(General 0 bug) Purely native implementation of a browser-like search function (ctrl + f)

If it can be achieved, remember to like and share, thank you~

Let’s take a look at the renderings first

Insert image description here

1. Description of the problem

Since the company's business needs to be in the search box,
Simulates the search function of Ctrl + F, supports self-selectable searchable area range,
and supports entering to view the next, up and down view, and automatic scrolling positioning,
to help novices solve searches that don’t know how to operate shortcut keys.

2. Solution to the problem

First check the api that comes with the browser. Sorry, there is none, it can’t be found~

3. First take a look at the effect of the original website

Name the script downloaded from the original website find5.js
and import it directly to get the following search box effect.

<script type="text/javascript" language="JavaScript" src="find5.js"></script>

Insert image description here

Based on a website, the specific reference URL is:
link: https://www.seabreezecomputers.com/tips/find5.htm
for secondary encapsulation.
I am very grateful to the author of this website for letting me see the light, because all kinds of weird bugs in other search components on the Internet made me feel uncomfortable.

4. Next is the script based on the secondary encapsulation of the original website (important)

Because it is purely native, it supports various frameworks (vue/react), etc. There is no need to read the entire script below, just copy and paste to create a new new_find5.js. Let’s take a look at the effect first: and supports adaptive line wrapping

Insert image description here

4. A few final things to note

The first parameter here represents whether to display label: 'View', and
the second parameter is the specified area to search. The default is the body of the entire web page
initFindWin(false, “contentMain”);

1. First introduce the script into your module interface, then add the container div and specify id:findwindow

<div id="findwindow"></div>
<div id="contentMain">此处是你要搜索的内容</div>

2. If it is pure js, you only need to comment the last line of code in new_find5.js and execute initFindWin() immediately.

If it is import, please npm i find5 or yarn add find5 first

Dude, please light up the stars https://gitee.com/coding_zxd/find5

3. If it is vue, this needs to be called in onMounted(), such as

import initFindWin from "find5";
export default {
    
    
  setup() {
    
    
    onMounted(() => {
    
    
      // 这里的第一个参数是代表是否展示label: '查看', 第二个参数 是指定的区域进行搜索。默认是body 整个网页
      initFindWin(false, "contentMain");
    });
    return {
    
    };
  },
};

4. If it is react + hooks, it needs to be called in useEffect()

import initFindWin from "find5";
useEffect(() => {
    
    
  initFindWin(false, "contentMain");
}, []);