关于javascript：在标签上用jQuery .mouseenter突出显示段落中的单词？

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

我已经存储了一个var，当我鼠标输入时标记的文本，现在我将把相同的单词放在段落文档、突出显示(如颜色)或粗体.css()中。

这是我的代码，警报允许我知道我在变量"lecontentu"中输入了哪些文本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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在这里：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

Zone de communication


@ville

@cp

@ville1

@ville2

@ville3

@ville4

@loc

@dpt


<h2 class="h2popout">Edition de contenu n°1

<ul class="collapsible popout collapsible-accordion" data-collapsible="accordion">

<li>

subtitlesFirst


Ce paragraphe présente les prestations client sous forme de liste à puce

Contribution H2

Phrases


Liste à puce + liens internes


CTA


</li>

<li>

placeSecond


BML est une @ville spécialisée dans la fission nucléaire, dans le Rh?ne : à Lyon.


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 carton. Contactez-nous pour plus d'informations sur le sujet.



</li>

</ul>

号

我不知道哪个函数允许我在

有人知道吗？

相关讨论

看来我参加晚会迟到了。我的解决方案类似于@brentboden。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@ville

@cp

@ville1

@ville2

@ville3

@ville4

@loc

@dpt



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.


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.

CSS

1
2
3
4
5
6
7
8
9

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

.highlight {
background-color: yellow;
}

JQuery

1
2
3
4
5
6
7
8
9
10
11
12

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

这是一把可以玩的小提琴。

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

相关讨论

我终于有了一个代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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 = '' + leContenu + '';

$('#body').html($('#body').html().replace(rgxp, repl));
}
}else{
$('#body').find('.myClass').css('color',"black");
}
});

1
2
3

.myClass{
color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52