使用jQuery选择器和JavaScript正则表达式更改字符串

Question

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.

Answer 1

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

Answer 2

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

Answer 3

  $("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.

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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.