在标签上使用 jQuery.mouseenter 突出显示段落中的单词？

Question

我已经储存了一个变量，当我鼠标输入时我的标签的文本，现在我会把同一个词放在段落文档中，用颜色或粗体突出显示。css()

这是我的代码，警报让我知道我在我的 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');
        }
    });

Html 在这里：

        <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>

我不明白哪个功能可以让我在

中搜索和修改

有人知道吗？

Answer 1

我终于得到了适用于此的代码

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>

Answer 2

看来我来晚了。我的解决方案类似于@BrentBoden。

HTML

<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 class="search">
  <p>Lorem ipsum dolor sit amet, consectetur @ville adipiscing elit. @ville2 Mauris non justo laoreet, tristique ex non, sodales odio. Sed ac nunc nisl. Mauris eu laoreet ligula, ac condimentum eros. Vivamus risus neque, mattis ac laoreet @cp non, imperdiet eget nunc. Cras porttitor volutpat leo, quis rhoncus nulla. Sed hendrerit sagittis neque, quis iaculis felis elementum eu. Donec et tristique sapien, sed scelerisque est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas at fringilla @ville1 purus. Curabitur sit amet est id sem auctor dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum quam orci, @loc aliquet @dpt vel faucibus eget, aliquam quis orci.</p>
  <p>Nullam diam magna, egestas ac metus non, dignissim lobortis purus. Aliquam erat volutpat. In nec massa eget mi vestibulum @ville3 varius volutpat a nisl. Nulla enim magna, fringilla eu erat nec, ullamcorper pellentesque dui. Etiam consectetur diam lectus, et finibus tellus feugiat quis. Pellentesque eu hendrerit dui. Nunc ut maximus mi, nec facilisis nisi. Etiam porta condimentum velit id @ville4 finibus. Aenean pretium condimentum orci vel tempor.</p>
</div>

CSS

.chip {
  display: inline-block;
  margin: 0 10px;
  background-color: #dadada;
}

.highlight {
  background-color: yellow;
}

jQuery

$(document).ready(function() {
  $(".chip").hover(function(e) {
    // Mouse In
    var text = $(this).text().trim();
    $(".search").html($(".search").html().replace(text, "<span class='highlight'>"+text+"</span>"));
  }, function(e) {
    // Mouse Out
    $.each($(".search p"), function(index, element) {
      $(element).html($(element).text());
    });
  });
});

这里有一个 Fiddle 可以玩。

NOTE:

My solution only highlights the first instance of the tag. If you need to highlight multiple tags at once you'll need to use RegEx - something similar to @BrentBoden's solution.

More info on that here: jQuery - replace all instances of a character in a string

在标签上使用 jQuery.mouseenter 突出显示段落中的单词？

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

html

javascript

jquery

mouseenter

HTML

CSS

jQuery