I try to change part of text inside a span tag I tried this:

<script>
    $(document).ready(function(){
        var toreplace= $(".poly-items__price span");
        toreplace = toreplace.replace("change","<p>new text</p>");
        $(".poly-items__price span").html(toreplace);
    });
</script>

here is a html:

<div class="poly-items__price">
    <span>do not change change</span>
</div>

here is an examples I used: /, /

but it doesn't working can you tell me what I missed thanks

I try to change part of text inside a span tag I tried this:

<script>
    $(document).ready(function(){
        var toreplace= $(".poly-items__price span");
        toreplace = toreplace.replace("change","<p>new text</p>");
        $(".poly-items__price span").html(toreplace);
    });
</script>

here is a html:

<div class="poly-items__price">
    <span>do not change change</span>
</div>

here is an examples I used: http://jsfiddle/Scoobler/a9cvx/4/, http://jsfiddle/bwhfD/

but it doesn't working can you tell me what I missed thanks

• javascript
• jquery
• html
• css

4 Answers 4

To get text from $(".poly-items__price span") need call .text() (or .html() if you care about html tags inside span)

$(document).ready(function(){
  var toreplace= $(".poly-items__price span").text();
  toreplace = toreplace.replace("change","<p>new text</p>");
  $(".poly-items__price span").html(toreplace);
});

if you want replace all "change" use:

toreplace = toreplace.replace(/change/g,"<p>new text</p>");

here is some fiddle http://jsfiddle/qsbdg4po/1

Edit

If you have multiple .poly-items__price spans, use each loop:

$('.poly-items__price span').each(function() {
  var toreplace = $(this).html();
  toreplace = toreplace.replace("change","<p>new text</p>");
  $(this).html(toreplace);
});

You can also pass a function to jQuery.html

    $(document).ready(function(){
        $(".poly-items__price span").html(function() {
              return $(this).html().replace("change","<p>new text</p>");
        });
    });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="poly-items__price">
  <span>do not change change</span>
</div>

Try this

you can alse use $(toreplace).find("span").html(str); for replacing content of span

 $(document).ready(function(){
        var toreplace= $(".poly-items__price");
       var str = $(toreplace).find("span").text().replace("change","<p>new text</p>");
     $(toreplace).find("span").text(str);
    });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="poly-items__price">
    <span>do not change</span>
</div>

try this

<script>
    $(document).ready(function(){
    var toreplace= $(".poly-items__price span").html();
    toreplace = toreplace.replace("change","<p>new text</p>");
    $(".poly-items__price span").html(toreplace);
     });
</script>
<div class="poly-items__price">
<span>do not change change</span>
</div>