Avatar of Mark Branscum
Mark Branscum
Flag for United States of America asked on

modify change color of text

Curious from those in the know .... can the below be modified to the same thing but without REGEX    :) but still with Jquery
div contains text like this
The basic idea is I just wanna find a specific string and change that strings color and not the rest

David Lion Killer
Marshal Dillan
David Caradine
Penny March

var search = 'bar';
$(document).ready(function () {
    $("div:contains('"+search+"')").each(function () {
        var regex = new RegExp(search,'gi');
        $(this).html($(this).text().replace(regex, "<span class='red'>"+search+"</span>"));
    });
});

Open in new window

JavaScriptjQuery

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
HainKurt

here

https://jsfiddle.net/6fn06593/
<div>
HainKurt here!
</div>
<div>
another div
</div>

Open in new window


var search = 'Kurt';
$(document).ready(function () {
    $("div:contains('"+search+"')").each(function () {
        $(this).html($(this).html().replace(search, "<span class='red'>"+search+"</span>"));
    });
});

Open in new window


.red {
  color:red;
}

Open in new window

SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Mark Branscum

ASKER
Hey guys just got in from work ... I have wanted to get here to look this over all day ..... sorry for the delay ....... Julian first I want to say ... I apologize I simply did not recall that we basically already put this together .... I feel bad about that ..... I went back over and looked at it .... and there it was ..........
   That being said .... I am going to check these out ....I already know from the previous code you did that its going to work ..... but will give it a go .... also thank you for the explaining the code as you did   .... I can not tell you how much that means to me ..... I learn so much from your post ....

   Ok ill be back in a bit
Julian Hansen

always welcome
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Mark Branscum

ASKER
 $("#btn6").click(function() {
        var search = "David Caradine";
        $("#divResult:contains('" + search + "')").each(function() {
         
          // var regex = new RegExp('(' + search + ')', 'gi');
          // $(this).html($(this).text().replace(regex, '<span class="red">$1</span>'));
          
          $(this).html($(this).text().replace(search, '<span class="red">' + search + '</span>'));

        });
        });

Open in new window


Julian most likely its me ........ but Ive tried both .... it is coloring the name searched for but it is giving me this order now ... did I mess it up


David Lion KillerMarshal
DillanDavid CaradinePenny
March

David Caradine is not bold as I show it here its red as we are aiming for but the order is as you see it now too instead of
David Lion Killer
Marshal Dillan
David Caradine
Penny March
Mark Branscum

ASKER
I found the problem and fixed it changed $(this).text to .html ... it is working .......

$("#btn6").click(function() {
    var search = "David Caradine";
    $("#divResult:contains('" + search + "')").each(function() {
        $(this).html($(this).html().replace(search, '<span class="red">' + search + '</span>'));

    });
 });

Open in new window


This getting it done ........
Mark Branscum

ASKER
In this case I felt these were the best solutions so the points go to Julian .....
Thank you Julian, seriously I learn every time you post ..... as for regex I guess it is in my future .... right now its HTML, CSS,  JQUERY, javascript ... my plate is full but I am working on it  :)   thanx again
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen

You are most welcome.