Question

我有一个字符串列表

select distinct
Date
from DateTable
where Date = DATEADD(MONTH, DATEDIFF(MONTH, -1, Date)-1, -1)

我想检查列表中的这些字符串是否属于my_list = ["A simple sentence" , "Lorem Ipsum" , "Example"]或<div id="lead">段落内容的一部分。

首先我想检查它的每个副本，如果我找到文本我想替换它只是为了改变字体颜色，例如<div id="detail" >。

我试过这样：

style="color:red;"

现在我不知道如何在这两段中进行搜索？我是否应该使用这种替换字符串bacuse的方式来替换孔p。

让我们说这是一个网页代码：

    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>)
                    }
                }
        });
   }

请帮帮我！ JS Fiddle

Answer 1

您可以使用p搜索每个each元素，然后为每个数组元素创建 RegExp 对象，然后使用replace找到它并将其包装在里面span元素。然后，您可以将样式应用于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>

Answer 2

$('p').each会在页面上搜索p的每个实例，因此您需要执行$('#lead p').each之类的操作来搜索p内的每个$('#lead')实例。 {1}}。

您还可以为每个容器div添加data属性，例如data-name="search-div"，然后您可以执行类似$('[data-name="search-div"] p').each的操作。

对于字符串替换，您可以执行此操作

$('[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>")
      );
    }
  }
});

fiddle

Answer 3

我有一份工作fiddle。

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

对于JavaScript，我使变量命名更加清晰，我还更新了搜索/替换以使用RegularExpression，因此列表中每个项目的每个实例都被替换。如果您注意到，我在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>")
       );
    }
  }
});

我还添加了一些CSS，因为内联样式通常是一种不好的做法：

.red {
  color: red;
}

检查字符串是否在div jquery的段落内

3 个答案: