js如何在页面中搜索关键字，并滚动到关键字所在位置呢？

页面选中文字存入localstorge中，刷新页面后，如何在div中搜索存的文字，然后滚动到文字所在区域呢？

```html
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
</head>
<body>
<div class="article">
    <p>帝高阳之苗裔兮，朕皇考曰伯庸。摄提贞于孟陬兮，惟庚寅吾以降。</p>
    <span>皇览揆余初度兮，肇锡余以嘉名。名余曰正则兮，字余曰灵均。纷吾既有此内美兮，又重之以修能。</span><br>
    <span>扈江离与辟芷兮，纫秋兰以为佩。汩余若将不及兮，恐年岁之不吾与。朝搴阰之木兰兮，夕揽洲之宿莽。日月忽其不淹兮，春与秋其代序。</span><br>
    <span>惟草木之零落兮，恐美人之迟暮。不抚壮而弃秽兮，何不改乎此度？乘骐骥以驰骋兮，来吾道夫先路！昔三后之纯粹兮，固众芳之所在。</span>    
</div>
<button id="cun">存文字</button>
<button id="du">读文字</button>
<script>
        $('.article').mouseup(function(){
              text = window.getSelection?window.getSelection().toString():document.selection.createRange().text;
             if(text !=""){
              $('#cun').click(function(){
                    localStorage.setItem("textjl", text));
              });
             }
        }); 
</script>
</body>
</html>

```

参考下记录上一次的光标位置 并恢复

JS localstorage存储window.getSelection()结果 并再次使用

你题目的解答代码如下：

<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div style="height: 2000px; width: 500px;background-color: #999;"></div>
<div class="article">
    <p>帝高阳之苗裔兮，朕皇考曰伯庸。摄提贞于孟陬兮，惟庚寅吾以降。</p>
    <span>皇览揆余初度兮，肇锡余以嘉名。名余曰正则兮，字余曰灵均。纷吾既有此内美兮，又重之以修能。</span><br>
    <span>扈江离与辟芷兮，纫秋兰以为佩。汩余若将不及兮，恐年岁之不吾与。朝搴阰之木兰兮，夕揽洲之宿莽。日月忽其不淹兮，春与秋其代序。</span><br>
    <span>惟草木之零落兮，恐美人之迟暮。不抚壮而弃秽兮，何不改乎此度？乘骐骥以驰骋兮，来吾道夫先路！昔三后之纯粹兮，固众芳之所在。</span>    
</div>
<button id="cun">存文字</button>
<button id="du">读文字</button>
<div style="height: 2000px; width: 500px;background-color: #999;"></div>
<script>

var range;
$('.article').mouseup(function(){
    const sel = window.getSelection()
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0)
    }
}); 
// 保存光标位置
$('#cun').click(function(){
    if (range) {
        let startNode = range.startContainer;
        let endNode = range.endContainer;

        if (startNode.nodeType == 3) {
          var startIsText = true;
          var startFlag = startNode.parentNode;
          startNode = startNode.nodeValue;
        } else {
          var startIsText = false;
          var startFlag = startNode;
        }
        if (endNode.nodeType == 3) {
          var endIsText = true;
          var endFlag = endNode.parentNode;
          endNode = endNode.nodeValue;
        } else {
          var endIsText = false;
          var endFlag = endNode;
        }

        let startOffset = range.startOffset; 
        let endOffset = range.endOffset; 

        let startTagName = startFlag.nodeName;
        let startHTML = startFlag.innerHTML;

        let endTagName = endFlag.nodeName;
        let endHTML = endFlag.innerHTML;

        //you can store this in database and use it
        let rInfo = {
          startNode: startNode,
          startOffset: startOffset,
          startIsText: startIsText,
          startTagName: startTagName,
          startHTML: startHTML,

          endNode: endNode,
          endOffset: endOffset,
          endIsText: endIsText,
          endTagName: endTagName,
          endHTML: endHTML
        };
        window.localStorage.setItem("r", JSON.stringify(rInfo));
    }
});
// 重置光标位置
$('#du').click(function(){
    let a = window.localStorage.getItem("r");
    use(JSON.parse(a));
});


$(window).load(function(){
    let a = window.localStorage.getItem("r");
    use(JSON.parse(a));
});




function findEle(tagName, innerHTML) {
  let list = document.getElementsByTagName(tagName);
  for (let i = 0; i < list.length; i++) {
    if (list[i].innerHTML == innerHTML) {
      return list[i];
    }
  }
}

function show(startNode,startIsText,startOffset,
          endNode,endIsText,endOffset,sP,eP) {
  var s, e;
  if (startIsText) {
    let childs = sP.childNodes;
    console.log(childs);
    for (let i = 0; i < childs.length; i++) {
      console.log(childs[i].nodeValue);
      console.log(startNode);
      if (childs[i].nodeType == 3 && childs[i].nodeValue == startNode)
        s = childs[i];
      console.log(s);
    }
  } else {
    s = startNode;
  }
  if (endIsText) {
    let childs = eP.childNodes;
    console.log(childs);
    for (let i = 0; i < childs.length; i++) {
      if (childs[i].nodeType == 3 && childs[i].nodeValue == endNode)
        e = childs[i];
      console.log(e);
    }
  } else {
    e = startNode;
  }
  let range = document.createRange();
  range.setStart(s, startOffset);
  range.setEnd(e, endOffset);

  let sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  //滚动条滚动到指定元素
  var top = $(s).parent().offset().top;
  console.log(top);
  setTimeout(function(){
    $(window).scrollTop(top-100);
  },100);
}

function use(obj) {
  if(!obj)
      return;
  let sP = findEle(obj.startTagName, obj.startHTML);
  let eP = findEle(obj.endTagName, obj.endHTML);
  show(
    obj.startNode,
    obj.startIsText,
    obj.startOffset,
    obj.endNode,
    obj.endIsText,
    obj.endOffset,
    sP,
    eP
  );
}

</script>
</body>
</html>

window.onload = () => {
        var children = document.querySelector('.article').children;
        var textjl = localStorage.getItem("textjl");
        for (let index = 0; index < children.length; index++) {
            const element = children[index];
            let text = element.innerText;
            if(text.indexOf(textjl) >= 0) {
                element.scrollIntoView(false);
                break;
            }
        }
    }