1

ページで「Two words」のインスタンスを検索し、スペースを改行なしのスペースに置き換える次のスクリプトを作成しました。

var search = $('body').html();
search = search.replace(/Two words/g, function($1) {
    return ('<span class="no-break">' + $1 + '</span>');
});


$('body').html(search);

$(document).ready(function() {
    $('.no-break').each(function() {
        var $this = $(this);
        $this.text($this.text().replace(/ /g, '\u00A0'));
    });
});​

http://jsfiddle.net/Ggkpb/

ただし、Web サイトに配置すると、他の jQuery や JavaScript が機能しなくなります。

私のより良い解決策はありますか？私のサイトの他のスクリプトを混乱させない何か。

4

3 に答える 3

2

この行：

$('body').html(search);

本体のすべての要素を再作成しますが、まだバインドされているかどうかに関係なく、イベント ハンドラーは除外されます。そのため、その手法を使用する場合は、イベント ハンドラーを作成する前に100% 確実に実行する必要があります (ボディまたはドキュメントに直接バインドされたハンドラーを除く)。

.html()問題とは関係ありませんが、現在の値を取得し.text()て新しい値を返すコールバック関数を呼び出すことができるため、コードをいくらか短くできることに注意してください(.each()ループは必要ありません)。

$(document).ready(function(){
    $('body').html(function(i, oldHtml){
        return oldHtml.replace(/Two words/g, '<span class="no-break">Two words</span>');
    }); 
    $('.no-break').text(function(i,oldText) {
        return oldText.replace(/ /g, '\u00A0');
    });
});
于 2012-12-10T03:05:20.103 に答える
1

これは別の書き方です。エラー メッセージを投稿しなかったので、これで問題が解決したと確信しています。

$(function(){
    $('body').html(function(){
        return $(this).html().replace(/Two words/g, '<span class="no-break">Two words</span>');
    }); 
    $('.no-break').each(function () {
        $(this).text($(this).text().replace(/ /g, '\u00A0'));
    });
});
于 2012-12-10T02:59:51.760 に答える
0

テキストをJavaScriptから分離した方が良いと思います。クラスを使用して、ページ内のすべてのテキスト ブロックにマークを付けることができます

<div class="text">abcxyz...Two words...</div>

そして電話する

$('.text').each(function(){
      var search = $(this).html();
      search = search.replace(/Two words/g, function($1) {
            return ('<span class="no-break">' + $1 + '</span>');
      });
      $(this).html(search);
});
于 2012-12-10T03:08:14.403 に答える