Post
Ask Question

Search Text Inside a DIV Using jQuery

This article shows how to search text inside a div using jQuery.

The following is the aspx:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="Contains_In_jQuery.Default2" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>Search Text Inside DIV text</title>  
  6.     <script src="Scripts/jquery-2.1.4.min.js"></script>  
  7.   
  8.   
  9.     <script type="text/javascript">  
  10.         $(function () {  
  11.             $('#btnCheck').click(function () {  
  12.                 var str = $("#divtxtAll").text();  
  13.                 var txt = $('#txtword').val();  
  14.                 if (str.indexOf(txt) > -1) {  
  15.                     alert('Search Text Found');  
  16.                     return true;  
  17.                 } else {  
  18.                     alert('Div Does not contains word');  
  19.                     return false;  
  20.                 }  
  21.             });  
  22.         })  
  23.     </script></head>  
  24. <body>  
  25.     <form id="form1" runat="server">  
  26.         <div>  
  27.             <table style="width: 100%; text-align: center; background-color: yellow; border: solid 5px Green;">  
  28.                 <tr>  
  29.                     <td style="background-color: red; color: white; text-align: center; font-size: 12pt; font-family: Arial; font-weight: bold;">Find Your Text</td>  
  30.                 </tr>  
  31.                 <tr>  
  32.                     <td></td>  
  33.                 </tr>  
  34.                 <tr>  
  35.                     <td style="background-color: #0094ff; color: white; text-align: left; font-size: 12pt; font-family: Arial; padding-left: 20px; padding-top: 10px; padding-bottom: 10px;">  
  36.                         <div id="divtxtAll">  
  37.                             <b>How are You?  
  38.                             <br />  
  39.                                 Noida, short for the New Okhla Industrial Development Authority, is a planned [2] city in India under the management of the New Okhla Industrial Development Authority (also called NOIDA). It is part of National Capital Region of India. Noida came into administrative existence on 17 April 1976 and celebrates 17 April as "Noida Day".<br />  
  40.                                 A Brief compendium of its achivements, in the years passed by, here we strive to present you the matchless facilities available in NOIDA.  
  41.                             <br />  
  42.                                 <br />  
  43.                                 Shopping Malls In Noida<br />  
  44.                                 Spice World Mall<br />  
  45.                                 CenterStage Mall, Sector-18, Noida<br />  
  46.                                 Shopprix mall, C-134B, Sector 61,<br />  
  47.                                 Supertech Shopprix, C-134B, Sector-61<br />  
  48.                                 Sab Mall, Atta Market, Sector 27 </b>  
  49.                         </div>  
  50.                     </td>  
  51.                 </tr>  
  52.                 <tr>  
  53.                     <td></td>  
  54.                 </tr>  
  55.                 <tr>  
  56.                     <td style="height: 50px; vertical-align: middle;">Enter Text to Search:  
  57.             <input type="text" id="txtword" />  
  58.                         <input type="button" id="btnCheck" value="Search Text" /></td>  
  59.                 </tr>  
  60.             </table>  
  61.         </div>  
  62.     </form>  
  63. </body>  
  64. </html>  
Now run the application.

enter text
Image 1.

search text found
Image 2.

find your text
Image 3.

search text
Image 4. 


Similar Articles