CODEWITHSUNDEEP
javascriptjqueryregex
emersonthis
emersonthis

Reputation: 33378

Change a string using jquery selector and javascript regex

All I want to do is replace the letter "y" with the letter "i" in all s with a certain class. I'm not sure why my script isn't working. I know the selector is working because I can swap the method to something like hide() and it works. I also can assign the value of the replace() into a variable, and that variable shows the correct substitution. So I'm boggled why the combination of the two isn't working...

<script type="text/javascript" src=".../jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
    $("span.certain_class").text().replace(/y/g, "i");
}
);
</script>';

EDIT: I need to clarify that I need to do this to multiple spans throughout the page. Remember that the text() method stacks up all the texts of each span... so something like this won't work:

$("span.certain_class").text($("span.certain_class").text().replace(...))

Each span will end up with a mess of the other span's text.

Upvotes: 1

Views: 623

Answers (7)

Sean Bright
Sean Bright

Reputation: 120644

$(document).ready(function() {
    $('span.certain_class').each(function() {
        $(this).text($(this).text().replace(/y/ig, function(s) {
            return (s === 'Y' ? 'I' : 'i');
        }));
    });
});

Upvotes: 1

maxedison
maxedison

Reputation: 17553

It should be:

var replaceSpan = $("span.certain_class")
replaceSpan.text(replaceSpan.text().replace(/y/g, "i"));

You need to pass a string to the .text() method. All you're currently doing is grabbing the text of span.certain_class as a string (.text()), performing the replace (.replace(..)), but then not doing anything with the resulting string.

Upvotes: 0

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262939

text() called without arguments only returns the element's inner text, and since strings are immutable in Javascript, your call to replace() will create a new string that's immediately forgotten.

You can pass a function to text() in order to build the new value from the previous one:

$("span.certain_class").text(function(index, currentText) {
    return currentText.replace(/y/g, "i");
});

Upvotes: 0

alexn
alexn

Reputation: 58962

Well, your solution works but you don't do anything with the result. Do you want to replace the text inside the div? Try this:

$(document).ready(function() {
        var elm = $("span.certain_class");
        var text = elm.text().replace(/y/g, "i"); // Get current text and replace y to i
        elm.text(text); // Set new text
    }
);

Upvotes: 0

Pieter
Pieter

Reputation: 3399

The text() function only gets the contents. But with you're current piece of code you don't replace the contents.

var replacement = $("span.certain_class").text().replace(/y/g, "i");
$("span.certain_class").text(replacement);

Upvotes: 0

gion_13
gion_13

Reputation: 41533

  $("span.certain_class").text(
    $("span.certain_class").text().replace(/y/g, "i")
  );

Your script does correctly replace all the "y"'s with "i"'s but it doesn't assign the value back to the dom element.

Upvotes: 0

genesis
genesis

Reputation: 50976

A typo in first line!

<script type="text/javascript" src=".../jquery.min.js"></script>

should be 

<script type="text/javascript" src="../jquery.min.js"></script>

working demo!

or if you want to change it directly to the same span, use

    $("span.certain_class").text($("span.certain_class").text().replace(/y/g, "i"));

http://sandbox.phpcode.eu/g/ab47c/2

Upvotes: 0

Related Questions