Replace a empty space with " " using Jquery

Question

I am looking around on the web but I am not finding anything useful. :(

I am having a problem that I don't understand. I am sure that I am doing something wrong, but I don't know well the syntax of jQuery to understand what is that I am not doing right.

I am using animations with JS and CSS 3, and I am having troubles with empty spaces between the words, and to solve this problems I have to find a way to substitute chars inside a string of text with something else. Like an empty space with a  , or as a test that I was trying to do a "n" with a "xxxxx".

What I think that I am doing is:

1. when the page is loaded
2. Modify the string of any paragraph with the class .fancy-title that contains "n" with a text "xxxxx"

So:

$(document).ready(function(){
    for(i=0; i< myLength+1; i++){
        var charCheck = $(".fancy-title").text()[i];
        if(charCheck == "n"){
            charCheck.replace("n", "xxxxxxxx");
        }
    }
});

But I receive an error that it said:

charCheck.replace("n", "xxxxxxxx"); it is not a function

I am using jquery

and other scripts that are based on jquery to make animations, rotation and scaling... and they are all in the HEAD with jquery first to load.

What am I doing wrong? Manipulation in jQuery does it need a specific .js extension? I understood that was in the basic capability of jQuery, and looking at other examples all creates me the same kind of error.

I even tried

if(charCheck == "n"){
   $(".fancy-title").text()[i] == " "
}

But simply the modification it is not applied on the page. I tried with innerHTML as well :( I feel so incompetent...

Thank you in advance for any help.

Answer 1

It seems you are trying to replace a single character with a new string.

You might be able to get the right result by dropping the iteration and simply call .replace on the jQuery-object.

Answer 2

You have no problem with the replace part :).

$(document).ready(function(){
    $(".fancy-title").each(function () { //for all the elements with class 'fancy-title'
         var s=$(this).text(); //get text
         $(this).text(s.replace(/n/g, 'xxxxxxxx')); //set text to the replaced version
    });
});

Just a quick example, hope it works.

Answer 3

$(document).ready(function(){
    $(".fancy-title").each(function(i){
        var text = $(this).html();
        $(this).html(text.replace(/ /g, " ");
    })
});

Answer 4

Have you tried the css style white-space:pre instead of replacing ' ' with ' '? http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space

Answer 5

Thx sod, I think that the css solution was better then expected. I wasn't thinking that with inline-block would have lost the white space.

Anyway thank you everyone one for the answer, I am testing the script and I am happy to learn new things :) Replace looks a really useful functionality