チェックは、文字列は、私は文字列のリストを持っている

のdivのjqueryの内側段落である場合。チェックは、文字列は、私は文字列のリストを持っている

まず最初に、フォントの色を変更するために置き換えたいテキストが見つかると、その部分の各パラパラを確認します。たとえばstyle="color:red;"です。

私はこのように試してみました：

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

を今私はそれが両方のこれらの段落で検索作る方法を知りませんか？そして、私は穴の代わりに文字列を置換するという方法を使用する必要があります。

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

は私を助けてください：

が、これは、Webページのコードであると言うことができます！ JS Fiddle

出典

2016-04-08 Anonymous

$('p').eachあなたが$('#lead')の内側pのすべてのインスタンスを検索する$('#lead p').eachような何かをしたいと思うので、ページ上のpのすべてのインスタンスを検索します。

data-name="search-div"のようなコンテナdivにdata属性を追加して、$('[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

出典

2016-04-08 14:29:59

あなたの答えをありがとう –

あなたがそれを見つけるとspan要素内にそれをラップするreplaceを使用し、各配列要素のためのRegExpオブジェクトを作成し、eachで各p要素を検索することができます。次に、スタイルを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>

出典

2016-04-08 14:28:58

OPは、彼が唯一の '＃のlead'と'＃のdetails' div要素内の段落を変更したいと述べました。たぶん '$（"＃lead p、＃detail p "）。それぞれ（...）'それをするだろうか？ –

@ピエールC.それは感謝していませんでした。 –

@NenadVracar大変ありがとうございます –

を行うことができ、私はあなたのために働いてfiddleを持っています。

HTMLの場合、構造体をほんの少しきれいにして、<p>タグと<div>タグがすべて正しく閉じられています。 JavaScriptが

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

は、私は、変数の命名がより明確になる、と私はまた、検索は/あなたのリストの各項目のすべてのインスタンスが交換されるので、正規表現を使用するように置き換える更新します。あなたが気づくなら、私はLorem IpsumをHTMLで2回追加してこれを実証しました。

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

出典

2016-04-08 14:47:49

チェックは、文字列は、私は文字列のリストを持っている

答えて

関連する問題