CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user6145033
user6145033

Reputation:

Check if a string is inside paragraphs of a div jquery

I have a list of strings 

my_list = ["A simple sentence" , "Lorem Ipsum" , "Example"]

I want to check if any of these strings inside my list is part of the content inside paragraphs of <div id="lead"> or <div id="detail" >.

So first I want to check inside each parapraph of it, if I find text I want to replace it just to change font color eg style="color:red;".

I tried like this : 

    my_list = ["A simple sentence" , "Lorem Ipsum" , "Example"]
    if ($("#lead").length) {
        $('p').each(function() {
            for (var i = 0; i < my_list.length; i++) {
                    var text =  my_list[i];
                    var result =  $(this).search(text)
                    if( result != -1){
                       // replace code? a
                       $this.text().replace(text, <p style="color:red;> text </p>)
                    }
                }
        });
   }

Now i dont know how to make it search in both those paragraphs? And should I use that way of replacing string bacuse it replace the hole p.

Lets say that this is a web page code:

<!DOCTYPE html>
<html>
   <head>
      <title></title>
   </head>
   <body>
      <div id="trunk">
         <div id="header">
            <p> ...</p>
            <p> ...</p>
         </div>
            <div id="lead"> 
               <p>Lorem Ipsum  </p>
               <p> some text ... </>
            </div>
            <div id="detail" >
               <p> What is it?</p>
               <p> Why do we use it?</p>
               <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
            </div>
         <div id="another-div">
            <p> ...</p>
            <p> ...</p>
         </div>
      </div>
   </body>
</html>

Help me please! JS Fiddle

Upvotes: 3

Views: 757

Answers (3)

mighty_mite
mighty_mite

Reputation: 596

$('p').each will search for every instance of p on the page, so you'll want to do something like $('#lead p').each to search every instance of p inside of $('#lead').

You could also add a data attribute to each container div, something like data-name="search-div" and then you could do something like $('[data-name="search-div"] p').each.

For the string replace, you can do this

$('[data-name="search-div"] p').each(function() {
  for (var count = 0; count < my_list.length; count++) {
    var text = my_list[count];
    var str = $(this).text();
    if (str.indexOf(text) >= 0) { //This is a case-sensitive search
      $(this).html(
        $(this).html().replace(text, "<span class='red'>$&</span>")
      );
    }
  }
});

fiddle

Upvotes: 1

Alessandro Bassi
Alessandro Bassi

Reputation: 427

I have a working fiddle for you.

For the HTML, I cleaned up the structure just slightly so the <p> and <div> tags are all properly closed.

<div id="trunk">
  <div id="header">
    <p> ...</p>
    <p> ...</p>
  </div>
  <div id="lead">
    <p>Lorem Ipsum </p>
    <p> some text ... </p>
  </div>
  <div id="detail">
    <p> What is it?</p>
    <p> Why do we use it?</p>
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum!</p>
  </div>
  <div id="another-div">
    <p> ...</p>
    <p> ...</p>
  </div>
</div>

For the JavaScript, I made the variable naming more clear, and I also updated the search/replace to use a RegularExpression so every instance of each item in your list is replaced. If you'll notice, I added Lorem Ipsum twice in the HTML to demonstrate this.

var my_list = ["A simple sentence", "Lorem Ipsum", "Example"];
$('#lead p, #detail p').each(function() {
  var p = $(this);
  for (var i = 0; i < my_list.length; i++) {
    var haystack = p.html();
    var needle = my_list[i];
    if (haystack.split(needle).length > 1) {
      p.html(
        haystack.replace(new RegExp(needle, 'g'), 
        "<span class='red'>" + needle + "</span>")
       );
    }
  }
});

I also added some CSS since inline styles are generally a bad practice:

.red {
  color: red;
}

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122087

You can search each p element with each, then create RegExp object for each array element and then use replace to find it and wrap it inside span element. Then you can apply style to span elements.

var my_list = ["A simple sentence", "Lorem Ipsum", "Example"];

$("#lead, #detail").find('p').each(function() {
  for (var count = 0; count < my_list.length; count++) {
    var re = new RegExp(my_list[count], "g");
    $(this).html(function(i, el) {
      return el.replace(re, "<span class='red'>$&</span>");
    });
  }
});
.red {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="trunk">
  <div id="header">
    <p>...</p>
    <p>...</p>
  </div>
  <div id="lead">
    <p>Lorem Ipsum</p>
    <p>some text ...</p>
  </div>
  <div id="detail">
    <p>What is it?</p>
    <p>Why do we use it?</p>
    <p>Lorem Ipsum is simply dummy Example text of the printing and typesetting industry.</p>
  </div>
  <div id="another-div">
    <p>A simple sentence Lorem Ipsum ...</p>
    <p>...</p>
  </div>
</div>

Upvotes: 1

Related Questions