jQuery replace space with non-breaking space between two specific words

Question

I've created the following script that searches the page for any instances of "Two words" and replaces the space with a non-breaking space:

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/

However, when I place it onto my website, it's causing other jQuery and javascripts not to work.

Is there a better solution to mine? Something that won't upset the other scripts on my site.

It may not work on your site due to not being within $(document).ready()... jsFiddle does that automatically. Can you show an example of where this is not working? — Cat
– Cat, Commented Dec 10, 2012 at 2:52

nnnnnn · Accepted Answer · 2012-12-10 03:10:41Z

2

This line:

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

recreates every element in the body, minus any event handlers that may or may not have already been bound. So if you're going to use that technique you need to be one-hundred percent sure that you do it before you create any event handlers (except for handlers bound directly to the body or the document, I suppose).

Unrelated to the problem, note that you can make your code somewhat shorter because you can call .html() and .text() once each, passing a callback function that takes the current value and returns the new value (you don't need an .each() loop):

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

edited Dec 10, 2012 at 3:10

answered Dec 10, 2012 at 3:05

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JV10 Over a year ago

Thanks for the clarification, I only need it for navigation items so I don't need to search the entire body. And if I specify to the relative navigation classes, it allows the other scripts to work properly. Cheers!

nnnnnn Over a year ago

Yep, if the element(s) you use the script on don't have children with event handlers or information stored via .data() it should be fine.

Larry Battle · Accepted Answer · 2012-12-10 02:59:51Z

1

Here's another way of writing it. Since you didn't post an error messages, then I'm sure if this fixes your problem.

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

answered Dec 10, 2012 at 2:59

Larry Battle

9,1985 gold badges43 silver badges55 bronze badges

1 Comment

nnnnnn Over a year ago

If you pass a callback function to .html() you don't need to use $(this).html() within the function because jQuery passes the existing value as a parameter to your function.

phnkha · Accepted Answer · 2012-12-10 03:08:14Z

0

I think it's better if you separate your text from your javascripts. You could mark every block of text in your page using a Class

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

and then call

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

answered Dec 10, 2012 at 3:08

phnkha

7,9102 gold badges26 silver badges31 bronze badges

Collectives™ on Stack Overflow

jQuery replace space with non-breaking space between two specific words

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related