Highlights a word in paragraph with a jQuery .mouseenter on a tag?

I've stocked in a var, the text of my tag when i mouseenter, and now i would put the same word if it's in a paragraph document, in highlights like a color or in bold .css()

here is my code, the alert allows me to know which text i put in my var 'leContenu' :

    var leContenu;
    $('.chip').on('mouseenter mouseleave', function(e) {
        if (e.type === 'mouseenter'){
            $(this).siblings(".chip").not(".noselect").stop(true, true).animate({'opacity': '0.7'}, 'fast');
            //alert ($(this).text());
            leContenu = $(this).text();

            $('p').find(leContenu).css('color', 'red');

    //another try
            /*
            return this.html(function() {
                alert ($(this).text());
                $('p').wrapInner(leContenu).css('color', 'red');
            });
            */
    //end another try

        }
        else{
            $(this).siblings(".chip").stop(true, true).animate({'opacity': '1'}, 'fast');
        }
    });

And the Html is here:

        <div class="var-category">
        <p class="title-category">Zone de communication</p>
        <div class="chips">
            <p class="chip">@ville</p>
            <p class="chip">@cp</p>
            <p class="chip">@ville1</p>
            <p class="chip">@ville2</p>
            <p class="chip">@ville3</p>
            <p class="chip noselect">@ville4</p>
            <p class="chip">@loc</p>
            <p class="chip">@dpt</p>
        </div>
    </div>

    <div class="container">
            <div class="Tcard">
                <div class="title-page">
                    <h2 class="h2popout">Edition de contenu n°1</h2>
                </div>
                <ul class="collapsible popout collapsible-accordion" data-collapsible="accordion">
                    <li>
                        <div class="collapsible-header"><i class="material-icons">subtitles</i>First</div>
                        <div class="collapsible-body">
                            <p>Ce paragraphe présente les prestations client sous forme de liste à puce</p>
                            <a href="#"><strong>Contribution</strong> H2</a>
                            <p>Phrases</p>
                            <p>Liste à puce + liens internes</p>
                            <p>CTA</p>
                        </div>
                    </li>
                    <li>
                        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
                        <div class="collapsible-body">
                            <p><strong class="tagVar">BML</strong> est une <span class="tagVar">@ville</span> spécialisée dans la fission nucléaire, dans le Rhône : à <span class="tagVar">Lyon</span>.</p>
                            <p>Nous proposons tout plein de jolis champignons à nos clients afin de développer une synergie
                            dans la confection de réseaux créatif. Il est important de noter l'impact écologique de nos centrales
                            en <span class="tagVar">carton</span>. <span class="tagVar">Contactez-nous</span> pour plus d'informations sur le sujet.
                            </p>
                        </div>
                    </li>
                </ul>
            </div>

I don't understand which function will allow me to search and modify in

Anyone knows?

Solution

I finally got a code working for this

var leContenu;
var repl;
$(document).on("mouseenter mouseleave", "#chip", function(e) {
	if(e.type == 'mouseenter'){
		if($('#body').find('.myClass').length > 0){
			$('#body').find('.myClass').css("color", "red");
		}else{
			leContenu = $(this).text().trim();
						
			var rgxp = new RegExp("\\b" + leContenu + "\\b" , 'gi');
			repl = '<span class="myClass">' + leContenu + '</span>';
			
			$('#body').html($('#body').html().replace(rgxp, repl));
		}
	}else{
		$('#body').find('.myClass').css('color', "black");
	}
});

.myClass{
	color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body">
  <div>
    <div id='chip' class=".chip">
      Test
    </div>
  </div>a
  
<h1>HTML Test Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean test, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem test dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</body>