检查字符串是否在div jquery的段落内
[英]Check if a string is inside paragraphs of a div jquery
问题描述
I have a list of strings 
我有一个字符串列表
my_list = ["A simple sentence" , "Lorem Ipsum" , "Example"]
I want to check if any of these strings inside my list is part of the content inside paragraphs of <div id="lead"> or <div id="detail" > . 我想检查列表中的任何这些字符串是否是<div id="lead">或<div id="detail" >段落内容的一部分。
So first I want to check inside each parapraph of it, if I find text I want to replace it just to change font color eg style="color:red;" 所以首先我要检查它的每个副本，如果我找到文本我想替换它只是为了改变字体颜色，例如style="color:red;" . 。
I tried like this : 我试过这样的：
my_list = ["A simple sentence" , "Lorem Ipsum" , "Example"]
if ($("#lead").length) {
$('p').each(function() {
for (var i = 0; i < my_list.length; i++) {
var text = my_list[i];
var result = $(this).search(text)
if( result != -1){
// replace code? a
$this.text().replace(text, <p style="color:red;> text </p>)
}
}
});
}
Now i dont know how to make it search in both those paragraphs? 现在我不知道如何在这两个段落中进行搜索？ And should I use that way of replacing string bacuse it replace the hole p. 我是否应该使用这种替换字符串bacuse的方式来替换孔p。
Lets say that this is a web page code: 让我们说这是一个网页代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="trunk">
<div id="header">
<p> ...</p>
<p> ...</p>
</div>
<div id="lead">
<p>Lorem Ipsum </p>
<p> some text ... </>
</div>
<div id="detail" >
<p> What is it?</p>
<p> Why do we use it?</p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<div id="another-div">
<p> ...</p>
<p> ...</p>
</div>
</div>
</body>
</html>
3 个解决方案
解决方案1
1 2016-04-08 14:28:58
You can search each p element with each , then create RegExp object for each array element and then use replace to find it and wrap it inside span element. 您可以搜索各个p元素与each ，然后创建RegExp对象的每个数组元素，然后用replace找到它，并把它包装内span元素。 Then you can apply style to span elements. 然后，您可以将样式应用于span元素。
var my_list = ["A simple sentence", "Lorem Ipsum", "Example"]; $("#lead, #detail").find('p').each(function() { for (var count = 0; count < my_list.length; count++) { var re = new RegExp(my_list[count], "g"); $(this).html(function(i, el) { return el.replace(re, "<span class='red'>$&</span>"); }); } });
.red { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="trunk"> <div id="header"> <p>...</p> <p>...</p> </div> <div id="lead"> <p>Lorem Ipsum</p> <p>some text ...</p> </div> <div id="detail"> <p>What is it?</p> <p>Why do we use it?</p> <p>Lorem Ipsum is simply dummy Example text of the printing and typesetting industry.</p> </div> <div id="another-div"> <p>A simple sentence Lorem Ipsum ...</p> <p>...</p> </div> </div>
解决方案2
1 已采纳 2016-04-08 14:29:59
$('p').each will search for every instance of p on the page, so you'll want to do something like $('#lead p').each to search every instance of p inside of $('#lead') . $('p').each都会在页面上搜索p每个实例，所以你想要做一些像$('#lead p').each都要搜索$('#lead')内的p每个实例$('#lead') 。
You could also add a data attribute to each container div, something like data-name="search-div" and then you could do something like $('[data-name="search-div"] p').each . 您还可以为每个容器div添加一个data属性，例如data-name="search-div" ，然后您可以执行类似$('[data-name="search-div"] p').each 。
For the string replace, you can do this 对于字符串替换，您可以执行此操作
$('[data-name="search-div"] p').each(function() {
for (var count = 0; count < my_list.length; count++) {
var text = my_list[count];
var str = $(this).text();
if (str.indexOf(text) >= 0) { //This is a case-sensitive search
$(this).html(
$(this).html().replace(text, "<span class='red'>$&</span>")
);
}
}
});
解决方案3
0 2016-04-08 14:47:49
I have a working fiddle for you. 我有一个工作小提琴 。
For the HTML, I cleaned up the structure just slightly so the <p> and <div> tags are all properly closed. 对于HTML，我稍微清理了结构，因此<p>和<div>标签都已正确关闭。
<div id="trunk">
<div id="header">
<p> ...</p>
<p> ...</p>
</div>
<div id="lead">
<p>Lorem Ipsum </p>
<p> some text ... </p>
</div>
<div id="detail">
<p> What is it?</p>
<p> Why do we use it?</p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum!</p>
</div>
<div id="another-div">
<p> ...</p>
<p> ...</p>
</div>
</div>
For the JavaScript, I made the variable naming more clear, and I also updated the search/replace to use a RegularExpression so every instance of each item in your list is replaced. 对于JavaScript，我使变量命名更加清晰，我还更新了搜索/替换以使用RegularExpression，因此替换了列表中每个项目的每个实例。 If you'll notice, I added Lorem Ipsum twice in the HTML to demonstrate this. 如果您注意到，我在HTML中添加了两次Lorem Ipsum来演示这一点。
var my_list = ["A simple sentence", "Lorem Ipsum", "Example"];
$('#lead p, #detail p').each(function() {
var p = $(this);
for (var i = 0; i < my_list.length; i++) {
var haystack = p.html();
var needle = my_list[i];
if (haystack.split(needle).length > 1) {
p.html(
haystack.replace(new RegExp(needle, 'g'),
"<span class='red'>" + needle + "</span>")
);
}
}
});
I also added some CSS since inline styles are generally a bad practice: 我还添加了一些CSS，因为内联样式通常是一个不好的做法：
.red {
color: red;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.