Convert string markups to HTML element through jQuery

Question

Initial HTML output that I get from wordpress:

<div class="testimonial-name">Syed Haroon {{ Web Developer_ India }}</div>

Below given jQuery code will convert {{ to <span> and }} to </span> and _ to ,

jQuery('.testimonial-name').text(function(index,text){
      return text.replace("{{",'<span>')
                 .replace("}}",'</span>')
                 .replace('_',',');
    })

After running the above code the result is:

<div class="testimonial-name">Syed Haroon &lt;span&gt; Web Developer, India &lt;/span&gt;</div>

What I actually need is:

<div class="testimonial-name">Syed Haroon <span>Web Developer, India</span></div>

AmmarCSE · Accepted Answer · 2015-09-29 18:21:45Z

2

Use html() instead of text

jQuery('.testimonial-name').html(function(index, html) {
  return html.replace("{{", '<span>')
    .replace("}}", '</span>')
    .replace('_', ',');
})

span{
  color:green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="testimonial-name">Syed Haroon {{ Web Developer_ India }}</div>

answered Sep 29, 2015 at 18:21

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

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

Comments

lmgonzalves · Accepted Answer · 2015-09-29 18:21:23Z

2

Use .html() instead .text():

jQuery('.testimonial-name').html(function(index,html){
    return html.replace("{{",'<span>')
        .replace("}}",'</span>')
        .replace('_',',');
});

DEMO

answered Sep 29, 2015 at 18:21

lmgonzalves

6,5883 gold badges24 silver badges43 bronze badges

Collectives™ on Stack Overflow

Convert string markups to HTML element through jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related