Как искать текст чтобы не "ломался" html?

Я сделал скрипт поиска по странице, вродебы все норм но есть одно но. А именно то что например если в поле поиска ввести "div"(или любой другой тег, или любой атрибут тега\тегов) скрипт выделит этот тег и "сломается" html код страницы.

Как это исправить?

var searchInput = document.getElementById('text-to-find');
searchInput.parentNode.onsubmit = function() {
  return false;
};
var findElement = document.querySelectorAll("*");
var panel = document.getElementById('panel');
var color1 = "rgb(255, 153, 0)";
var searched = false;

searchInput.addEventListener("input", function(event) {
  if (event.key != "Enter") {
    clear_all();
  }
});

searchInput.addEventListener("keydown", function(event) {
  if (event.key == "Enter") {
    search();
  }
});

window.addEventListener("keydown", function(event) {
  if (event.keyCode == 114) {
    event.preventDefault();
    searchInput.focus();
    return;
  }
});

/*document.addEventListener("DOMContentLoaded",function(){
    if(localStorage.getItem("search")){
        setTimeout(function(){
            if(localStorage.getItem("search") !== ""){
            searchInput.value = localStorage.getItem("search");
            search();
        }},3000);
    }
});*/

function search() {
  if (searched === false) {
    var findText = searchInput.value;
    findText = findText.replace(/\s+/g, ' ').trim();
    if (findText === "") {
      alert("Ви нічого не ввели");
      return;
    } else {
      //[ код выделающий текст
      for (var i = 0; i < findElement.length; i++) {
        if (!["html", "meta", "head", "body", "link", "script", "input", "style", "br", "form"].includes(findElement[i].localName.toLowerCase()) && !["find"].includes(findElement[i].id.toLowerCase()) && !["menu5"].includes(findElement[i].className)) {
          findElement[i].innerHTML = findElement[i].innerHTML.replace(eval('/' + findText + '/gi'), "<span class='mark' style='background:yellow'>$&</span>");
        }
      }
      //]
      if (!document.getElementsByClassName('mark')[0]) {
        alert("Нічого не знайдено");
      } else {
        document.getElementsByClassName('mark')[0].style.background = color1;
        panel.style.display = "block";
        searched = true;
        var mark = document.getElementsByClassName('mark');
        nextFind(mark);
        markPanel(mark);
        //localStorage.setItem("search", findText);
      }
    }
  } else {
    var mark = document.getElementsByClassName('mark');
    nextFind(mark);
  }

}



function findPos(obj) {
  var curtop = 0;
  if (obj.offsetParent) {
    do {
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    return [curtop];
  }
}

var m = 0;

function nextFind(mark) {
  var max = mark.length;
  window.scrollTo(0, findPos(mark[m]) - 20);
  m++;
  if (m >= max) {
    m = 0;
  }
}

function toElem(n) {
  var mark = document.getElementsByClassName('mark');

  window.scrollTo(0, findPos(mark[n]) - 20);
}

function markPanel(mark) {
  var max = mark.length;
  var docHeight;
  if (window.innerHeight > document.documentElement.offsetHeight) {
    docHeight = window.innerHeight;
  } else {
    docHeight = document.documentElement.offsetHeight;
  }

  var result;
  var style = "width: 5px;height: 5px;background: lime;border-top: solid 1px black;position: absolute;";
  for (let i = 0; i < max; i++) {
    result = mark[i].offsetTop / docHeight;
    panel.innerHTML += '<div class="markers" style="' + style + 'top:' + (result * 99) + '%;" onclick="toElem(' + i + ')"></div>';
  }
}

function clear_all() {
  searched = false;
  panel.style.display = "none";
  panel.innerHTML = "";

  let expandNode = (node) => {
      node.childNodes.forEach((child) => node.after(child));
      node.remove();
    }
    [...document.getElementsByClassName("mark")].forEach((el) => expandNode(el));

  // localStorage.setItem("search", "");
}
<div class="menu5" align="right">

  <form>
    <input class="place_for_search" type="text" id="text-to-find" value="" placeholder="Search" autofocus>
    <input class="button_for_turn_back" type="button" onclick="clear_all()" value="&#10060;" />
    <input class="button_for_search" type="button" onclick="search()" value="&#128269;" />
  </form>
</div>
<div class="text6">
</div>

<div class="menu1" align="left">

  <a href="AoB-1.html">
    <button class="button7"><b>Key Axioms of Business</b></button>
  </a>
  <a href="AoB-1.html">
    <button class="button7">Preface. Axioms 1-20</button>
  </a>
  <a href="AoB-2.html">
    <button class="button7">Axioms 21-40</button>
  </a>
  <br>
  <a href="AoB-3.html">
    <button class="button7">Axioms 41-60</button>
  </a>
  <br>
  <a href="AoB-4.html">
    <button class="button7">Axioms 61-80</button>
  </a>
  <br>
  <a href="AoB-5.html">
    <button class="button7">Axioms 81-100</button>
  </a>
  <br>
  <a href="AoB-6.html">
    <button class="button7">Axioms 101-120</button>
  </a>
  <br>
  <a href="AoB-7.html">
    <button class="button7">About the author</button>
  </a>
  <br>
  <a href="AoB-8.html">
    <button class="button7">Publishing data I</button>
  </a>
  <br>
  <a href="AoB-9.html">
    <button class="button7">Publishing data II</button>
  </a>
</div>

<div class="menu2">
  <a href="AoB-3.html">
    <button class="button">&gt;
            </button>
  </a>
</div>
<div class="text2"></div>

<div class="menu3">
  <a href="AoB-1.html">
    <button class="button">&lt;
            </button>
  </a>
</div>
<div class="text3"></div>

<div class="menu4" align="right">
  <a href="AoB-1.html">
    <button class="button7"><b>Key Axioms of Business</b></button>
  </a>
</div>
<div class="text4"></div>

<div class="menu6" align="left">

  <a href="AoB-2.html">
    <button class="button9"><b>UKR</b></button>
  </a>
</div>
<div class="text8"></div>

<div class="menu7" align="right">
  <a href="AoB-2.html">
    <button class="button8"><b>ENG</b></button>
  </a>
</div>
<div class="text9"></div>

</div>
<div class="block1" align="center"><b><h1>Key Axioms of Business</h1><h2>The Basic Rules of Starting and Developing a Successful Business</h2></b></div>
<div class="text5" align="justify">
  <p> </p>
  <div class="text5"></div>
  <br>
  <hr>
</div>

<div class="block2" align="center"><b><h3>Axioms 21-40</h3></b></div>

<div class="text7" align="justify">
  21. The probability of failing in business cannot be excluded. By entering into the relevant agreements of risk event insurance, entrepreneurs may be able to protect their business from fatal losses and damages.
  <br> 22. Entrepreneurs’ personal business tastes should be consistent with general tastes in the chosen business area.
  <br> 23. Choosing the right industry and business is like choosing the right spouse for a long and happy life —“for better, for worse; for richer or poorer; in sickness and in health; in joy and in sorrow.” Choose wisely with this long-term commitment
  in mind.
  <br> 24. It is fair to say that there are no fools among successful competitors. Thus, if a certain market segment is not occupied by competitors at a certain time, it does not mean that no competitor has ever attempted to operate there. Similarly,
  just because an idea is seemingly new or unique does not mean that no one else has tried it.
  <br> 25. Never underestimate your competitors. All successful competitors are smart.
  <br> 26. Most business partnerships break down for one of the following reasons: different approaches to profit-sharing among partners (most often); different leadership ambitions of the partners (less often); and different approaches to business development
  (least often). Partnerships practically never break down because of family or friendly relationships among business partners.
  <br> 27. Developing a business plan is an inevitable prerequisite for every successful venture. Pursuing business without specifying its goal is like sailing in fog with your navi gation system turned off—it will be virtually impossible to get anywhere.
  A minimally successful business built with no preliminary business planning would certainly be more successful with such planning. Even a bad business plan is better than no business plan at all.
  <br> 28. A business plan is a developed theoretical model of business, but it should not be viewed as a set of unchan geable calculations and analytical documents. An entrepreneur should be prepared to admit that practical steps aimed at business implementation
  may require corrections to the plan, and may even result in a review of the selected directions and types of business or, in some cases, a review of the list of partners.
  <br> 29. A catchy, attractive name will not necessarily make the new business successful. Rather, a successful business makes its name attractive and well-recognized.
  <br> 30. Every entrepreneur should undoubtedly have a sense of intuition, and decisions based on this intuition should be taken seriously. However, bear in mind that the accuracy of an intuitive decision is directly proportional to the decision-maker’s
  practical experience as an entrepreneur.
  <br> 31. In contrast to more experienced competitors, novice entrepreneurs can have the advantage of “fresh eyes,” giving them an unbiased view of the industry.
  <br> 32. Any business—whether new or existing, or even very successful—will always have certain advantages and also relative disadvantages in comparison to other businesses in the market.
  <br> 33. Be specific in the plan. If the business plan requires $1,000 to achieve a certain goal, $999 will not be sufficient; if $999 is sufficient, that means that the business plan was made incorrectly.
  <br> 34. The main financial goal of any business is to maximize profits by maximizing business revenue while optimizing (but not minimizing) costs. Focus on earning as much as possible while spending wisely.
  <br> 35. Insufficient attention to cost optimization can cause irreparable damage to the business and, ultimately, bankruptcy. Entrepreneurs must learn to internalize and follow the rules of cost optimization, especially at the initial stage of business
  implementation. Think twice before making any additional purchase for the company to ensure it is really necessary.
  <br> 36. Regularly monitor all current expenses and proceeds to ensure the sustainability and safety of your business. Similar to a medical examination of the human body organs, all components of the business should be regularly examined to determine
  its overall health.
  <br> 37. Official registration of a business is not the same as business success; it simply signifies the right to achieve success in the business that was officially registered.
  <br> 38. Each employee’s professionalism is a combination of (a) the level of the employee’s knowledge in a certain area and (b) the degree of that employee’s personal responsibility for direct performance results.
  <br> 39. The business’s professionalism is revealed through the professionalism of its staff.
  <br> 40. The axiom of “maintaining employee successfulness” says that any employee who has previous experience in a given profession will usually repeat the same professional performance in the future. Every employee has a purely individual “professional
  portrait.”
  <br>
  <br>
  <br>
  <hr>
  <br>
  <br>
</div>

<div id="panel"></div>
<script src="search.js"></script>


Ответы (0 шт):