当我进入mouseenter时，我已经存入了var，我的标签文本，现在我会在段落文档中添加相同的单词，如颜色或粗体高亮.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>
我不明白哪个功能允许我搜索和修改
任何人都知道？
答案 0 :(得分：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>
答案 1 :(得分：1)
看起来我已经迟到了。我的解决方案类似于@BrentBoden。
<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>
.chip {
display: inline-block;
margin: 0 10px;
background-color: #dadada;
}
.highlight {
background-color: yellow;
}
$(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来玩。
注意：
我的解决方案只突出显示标记的第一个实例。如果您需要一次突出显示多个标签，则需要使用RegEx - 类似于@ BrentBoden的解决方案。
有关此处的更多信息：jQuery - replace all instances of a character in a string