web-dev-qa-db-ja.com

divにこのテキストが含まれている場合はjQuery、テキストのその部分を置き換えます

タイトルにあるように、div内のテキストの特定の部分を置き換えたいです。

構造は次のようになります。

<div class="text_div">
    This div contains some text.
</div>

そして、例えば、「含む」のみを「こんにちはみんな」に置き換えたいと思います。これに対する解決策が見つかりません。

73
Daniel

text メソッドを使用し、ネイティブの String.prototype.replace メソッドを使用して置換されたテキストを返す関数を渡すことができます。

​$(".text_div").text(function () {
    return $(this).text().replace("contains", "hello everyone"); 
});​​​​​

実施例 です。

134
James Allardice

可能な場合は、次のように、spanタグで置換するWordをラップできます。

<div class="text_div">
    This div <span>contains</span> some text.
</div>

その後、jQueryを使用してその内容を簡単に変更できます。

$('.text_div > span').text('hello everyone');

Spanタグでラップできない場合は、正規表現を使用できます。

8
grc
var d = $('.text_div');
d.text(d.text().trim().replace(/contains/i, "hello everyone"));
7
fcalderan

このコードを使用するだけで非常に簡単になります。HTMLを保持し、ラップされていないテキストのみを削除します。

jQuery(function($){

    // Replace 'td' with your html tag
    $("td").html(function() { 

    // Replace 'ok' with string you want to change, you can delete 'hello everyone' to remove the text
          return $(this).html().replace("ok", "hello everyone");  

    });
});

完全な例を次に示します。 https://blog.hfarazm.com/remove-unwrapped-text-jquery/

3
hfarazm

contains selector を使用して、特定のテキストを含む要素を検索できます

var elem = $('div.text_div:contains("This div contains some text")')​;
elem.text(elem.text().replace("contains", "Hello everyone"));

3
z33m