Question

我创建了以下脚本，在页面中搜索“两个单词”的任何实例，并用不间断的空格替换空格：

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/

然而，当我把它放到我的网站上时，它会导致其他jQuery和javascripts无法正常工作。

我的解决方案是否更好？不会扰乱我网站上其他脚本的东西。

Answer 1

这一行：

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

重新创建正文中的每个元素，减去任何可能已绑定或未绑定的事件处理程序。因此，如果您要使用该技术，您需要百分之百确定在之前创建任何事件处理程序（除了直接绑定到正文或文档的处理程序之外）假设）。

与此问题无关，请注意您可以缩短代码，因为您可以每次调用.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'); }); });

Answer 2

这是另一种写作方式。由于您没有发布错误消息，因此我确定这是否可以解决您的问题。

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

Answer 3

我认为将文本与javascripts分开会更好。您可以使用Class

标记页面中的每个文本块

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

jQuery用两个特定单词之间的不间断空格替换空格

3 个答案: