5

コンテンツ内の特定の単語を削除する機能を作りたい

このコードを取得しました

jQuery

<script>
$(document).ready(function(){
    $('#cl').click(function(){
        $('div').remove(':contains("kamal")');
    });
    
    
})
</script>

HTML

<div>asdjh alsdhj kamal ljkahsdhasd lakshd kamal</div>
<div ><a href="#" id="cl">click</a></div>
<div>asdjh alsdhj  ljkahsdhasd lakshd </div>

しかし、全体を削除すると、内容全体でdivはkamalなく、コンテンツからこの単語のみを削除したいのですが、ここdivで私のコードのオンラインデモを見ることができます

4

7 に答える 7

4

要素に対して読み取り-変更-書き込みを行う正しい方法は、jQuery の「関数パラメーター」メソッドを使用することです。

$('div:contains(kamal)').filter(function() {
    return $(this).children().length === 0;  // exclude divs with children
}).text(function(index, text) {
    return text.replace(/kamal/g, '');
});

これにより、2 回の呼び出しが回避.text()され、コード ロジックも簡素化されます。

タグがネストされている場合、疑似セレクターは直接の子だけでなくすべての子孫を考慮し、ボトムアップではなくトップダウンで処理するため、通常とは異なる結果になる可能性があることに注意してください。これが、DOM ツリー内のリーフ ノードのみが考慮されるようにするために、上記のソリューションに初期呼び出しが含まれている理由です。div:contains().filter

別の方法は.contents、DOM テキスト ノードを使用して直接見ることです。

var re = /kamal/gi;

$('div').contents().each(function() {
    if (this.nodeType === 3 && this.nodeValue.match(re)) {
        this.nodeValue = this.nodeValue.replace(re, '');
    }
})​

https://jsfiddle.net/alnitak/eVUd3/を参照してください

EDITstring.match(regex) 2 番目の例をの代わりに使用するように更新しましたregex.test(string)。

于 2012-05-15T08:11:37.097 に答える
2

これはあなたのために働くはずです

 <script>
 $(document).ready(function(){
     $('#cl').click(function(){             
        var ka = /kamal/gi;

        $('div').contents().each(function() {

            // this.nodeType === 3 selects the text nodes section of the DOM
            // then ka.test(this.nodeValue) performs a regex test on the text 
            // in the node to see if it contains the word "kamal" with the 
            // global /g flag to search the entire string and /i to be case 
            // insensitive

            if (this.nodeType === 3 && ka.test(this.nodeValue)) {
                this.nodeValue = this.nodeValue.replace(ka, '');
            }
            // this section catches the text nodes within the child and 
            // performs the same operation
            $(this).contents().each(function() {
                if (this.nodeType === 3 && ka.test(this.nodeValue)) {
                     this.nodeValue = this.nodeValue.replace(ka, '');
                }
            })        
        })

     })
 });
 </script>

edit : 単純な文字列置換をグローバル正規表現置換に変更して、ワンクリックですべてのインスタンスを置換します。実際の例については、 JSFiddleを参照してください。

編集：コードの以前のバージョンがテキストだけでなくテキストを含む子要素全体を削除したことに注意して正しかった@Alnitakからのコメントに基づいて、新しい更新されたバージョンはDOMを混乱させず、キーワードのすべてのインスタンスを削除します"kamal"更新された JSFiddle を参照してください。

于 2012-05-15T07:31:57.990 に答える
1 
var $div = $('div');
$div.text($div.text().replace('yourword', ''))
于 2012-05-15T07:27:11.487 に答える
0

text()値を取得して値を設定するのでtext( "someValue" )、一方を他方の中に配置するだけです。これはあなたのために働くはずです

https://jsfiddle.net/nnsP4/

$(document).ready(function() {
  $('#cl').click(function(){
      $('div:contains("kamal")').each(function(){
         var text = $(this).text();
         var newValue =  text.replace('kamal', '');
          $(this).text(newValue);
      });
   });
});
于 2012-05-15T07:56:43.127 に答える
0

remove 関数は、コンテンツだけでなく DOM からノードを削除します

試す$('div).text().replace('kamal','');

編集：これは機能しています

$('div').text($('div').text().replace('kamal', ''));

https://jsfiddle.net/qH4CJ/

于 2012-05-15T07:26:53.220 に答える
0

これを使って：

 $('#cl').click(function(){
        $('div').each(function(){
            $(this).text($(this).text().replace(/kamal/g, '');
          });
 });
于 2012-05-15T07:43:02.573 に答える
-1

置換メソッドを使用できます

$('#cl').click(function(){
        $('div').text($('div').text().replace('kamal',''));
});
于 2012-05-15T07:27:13.560 に答える