How to select & Highlight text within an HTML File content using JS?

Viewed 28

I am creating a text highlighter in react JS. Here I am getting html page string and setting it into a div.

This html string will render inner HTML in my react JS app and would show all the content.

Now I want to select some text from this page(containing html part) & store it into my database table, so that whenever I'll open this page it will hit an api and get selected text and make that particular part of html string highlighted.

Here is a sample html file code ::

<html>

<head>
  <title>SECTION 2</title>
</head>

<body>
  <p style='margin-left:22.5pt' align="justify">
    <font face="Arial" size="2">(5)
      <b>�agent</b>� means a person, including a factor, broker, commission agent, arhatia, del <span class=SpellE>credere</span> agent, an auctioneer or any other mercantile agent, by whatever name called, who carries on the business of supply or receipt
      of goods or services or both on behalf of another;
      <br>
      <br> (6) <b>�aggregate turnover� </b>means the aggregate value of all taxable supplies (excluding the value of inward supplies on which tax is payable by a person on reverse charge basis), exempt supplies, exports of goods or services or both and
      inter-State supplies of persons having the same Permanent Account Number, to be computed on all India basis but excludes central tax, State tax, Union territory tax, integrated tax and <span class=SpellE>cess</span>;
      <o:p></o:p>
    </font>
  </p>

  <p align="justify">
    <font face="Arial" size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (7) <b>�<span class=GramE>agriculturist</span></b>� means an individual or a Hindu Undivided Family who undertakes cultivation of land�</font>
  </p>

  <p align="justify">
    <font face="Arial" size="2">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (a) <span class=GramE>by</span> own <span class=SpellE>labour</span>, or</font>
  </p>

  <p align="justify">
    <font face="Arial" size="2">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (b) <span class=GramE>by</span> the <span class=SpellE>labour</span> of family, or
    </font>
  </p>


</body>

</html>

How can I achieve this by using react JS Or JavaScript.

0 Answers
Related