Member Avatar for designershiv 
<html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //$(".box:contains(latin)").wrap("<div></div>");
            // $("div:contains('roots')").css("text-decoration", "underline");
            //$("div:contains('John')").css("text-decoration", "underline");
            $("div:contains('John')").addClass('test');

        });
    </script>
<style type="text/css">
  .test{color:red;}
  .list{float:left; width:80px;}
  .list li{list-style-type:none;}
  input{text-transform:uppercase;}
</style>
    </head>
<body>


 <div>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in John a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard John John John John John McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over John 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
 </div>
</body>
</html>

anyone can help?

  • 4 Contributors
  • 9 Replies
  • 3K Views
  • 11 Months Discussion Span
  • Latest Post Latest Post by designershiv
Member Avatar for ko ko

Check RegEx.

Member Avatar for designershiv

Thanks for your response so far
Inside the paragraph each and every word is a string i like to how to select the particular word and highligh that using jquery, not php or other languages.

Thanks in Advance

Member Avatar for pritaeas

I have a plugin (hp-highlight) for that, written a long time ago. Get the source, and see how it can be done.

Edited by pritaeas
Member Avatar for designershiv

Thanks for both of them " Zero13 " " pritaeas "

Member Avatar for designershiv

Hey buddys,

I found another solution and it works , Its just my own code so there may be mistakes, please let me know your feedback

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var dvWords = $("#dvContent").html().split(' '); 
    var dvHTML = ''
    for (i=0; i < dvWords.length; i++) 
        {   
            if (dvWords[i].toLowerCase() == 'jquery') 
                {
                    dvHTML += ' ' + '<span>' + dvWords[i] + '</span>';
                }
                else
                {
                    dvHTML += ' ' + dvWords[i];           
                }
        }  

   $("#dvContent").html(dvHTML);
});
</script>
<style type="text/css">
body {
    font-family:Arial;
    font-size : 10pt;
}
#dvContent span {
    text-decoration: underline;
    font-weight : bold;
    color : Blue;
}
</style>
</head>

<body>
<div>
<div id="dvContent" class=""> Lorem ipsum dolor sit amet, consectetur adipiscing elit. jQuery In nulla est, congue quis sagittis vel, ullamcorper euismod mi. Duis gravida, nibh id placerat sagittis, quam tellus vestibulum nisl, a feugiat augue ipsum sit amet urna. Sed semper urna non odio bibendum blandit. Etiam eu jQuery orci ut arcu commodo dignissim. Curabitur sit amet massa velit. Fusce in felis ac ipsum ultrices elementum. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetur jQuery adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Suspendisse turpis nulla, mattis et scelerisque vitae, eleifend dictum nibh. Suspendisse at felis velit, sed sollicitudin enim. Aliquam erat volutpat. jQuery Quisque sed purus ac enim volutpat iaculis eget et risus. Donec consequat odio vel sem dignissim eu venenatis nisl vehicula. Suspendisse potenti.

  Maecenas et arcu et quam dapibus lobortis. Curabitur tincidunt tincidunt dictum. jQuery Sed porta cursus jQuery sodales. Cras sodales, ipsum non molestie malesuada, erat lacus faucibus orci, id venenatis leo nibh quis purus. Proin eu sem vitae felis pellentesque suscipit vitae id erat. In eros mi, egestas non cursus ac, bibendum ac nisl. Cras convallis elit jQuery in felis congue ut consectetur ipsum egestas.

  Pellentesque jQuery felis elit, posuere ut aliquet id, fermentum et purus. Quisque ac nunc vitae sapien eleifend sollicitudin. Proin nisl est, congue et adipiscing nec, rutrum non eros. Sed ultrices ullamcorper justo, in lobortis quam mollis ac. Proin ac lacinia eros. Integer jQuery suscipit consectetur scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sem sapien, sollicitudin sed sodales non, cursus nec ipsum. Aenean pretium eros non felis accumsan vitae tristique quam dapibus. Donec eget quam sed sem varius rutrum eget nec mi. jQuery Cras ut ipsum nisl. </div>
</body>
</html>
Member Avatar for Taywin

If you follow Zero13 suggestion, your script lines 9~22 would be eliminated, and the needed script will be 1 line...

$("#dvContent").html($("#dvContent").html().replace(/(\W)(jquery)(\W)/ig, "$1<span>$2</span>$3").replace(/^(jquery)(\W)/ig, "<span>$1</span>$2"));

What the regular expression does is to match anything that is not a letter, number, or underscore before the word jqueury (case-insensitve) which follows by anything that is not a letter, number, or underscore. Then take the matched part and add span tag around it.

I am not saying that this regex will match every cases. It won't work if you want to match the word jquery as a part of string. However, your way of doing will not work with the word at the end of a sentence (i.e. "JQUERY? I want to work with jQuery. Do you want too?"), and that is a common posibility of a word to be at the end.

PS: Gosh, you didn't come back to check your own post for 5 months.

Edited by Taywin
Member Avatar for designershiv

Thanks taywin, I was little busy another project.
Anyway your solution is very good and it works.Is it possible for you to explain this code because am not expert in jquery.Explain here or through some video tutor will be fine.

Member Avatar for Taywin

It is not really JQuery but it is more on regular expression (AKA regex) and replace() function in JavaScript (which is the base of JQuery). A regular expression is used to match a string pattern which is fuzzy. You need to understand the pattern and keywords of it. You could read this tutorial to understand a bit better.

The replace function takes a string pattern/regex and a replaced string. If it could match the pattern, it will replace the matched with the given string. The keyword ig after forward slash (/) is to let the function knows that this is ignore case (i) and do it globlally (g). In the second argument, it contains $1, $2, etc. This means to use the matched group found in string replacement. The matched group is from any matched inside the parenthesis pair from the pattern. $1 is the first group, $2 is the second group, and so on.

Don't worry about it right now because it may be too deep for you at the moment. You could try to learn regex for other string manipulation because it is very useful and fast.

Edited by Taywin
Member Avatar for designershiv

Again i am late,But I really appreciate your feedbacks.
thank you very much

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.