1

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

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 无法工作。

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

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 分开。您可以使用 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);
});
于 2012-12-10T03:08:14.403 回答