How to replace a text multiple time with another text in jquery?

Question

I want to replace a word from a text in my html with another word. For this i am using replace method of jquery. It is working fine if word occurs only one time. But if the word occur multiple time how can i replace it. Here is my html Code

 <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      </head>

      <body>
        <div class="container-fluid" id="printableArea">
          <h1>Hello World!</h1>
          <p>Resize the browser window to see the effect.</p>
          <div class="row">
            <div class="col-sm-3 col-md-6" style="background-color:lavender;" id="datachange">
              <p>Lorem ipsum dolor sit amet, ${doller} adipisicing elit, sed do eiusmod tempor ${currency} ut labore et dolore magna aliqua.</p>
              <p> Ut enim ad minim veniam, quis ${doller} exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
          </div>
          <div id="">
          <h1>Print me</h1>
    </div>
    <select id="myselect">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    <select id="currency">
      <option value="doller">doller</option>
      <option value="euro">euro</option>
      <option value="rupees">rupees</option>
    </select>

        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script>

    var value = "${doller}",
    value1 ="${currency}";

        function changedata() {

            $("#datachange").text(function () {
                return $(this).text().replace(value, $("#myselect option:selected" ).text() ); 
            });
            value = $("#myselect option:selected" ).text() ;
        }

        $( document ).ready(function() {
      changedata();
    });
    $('#myselect').on('change', function (e) {
      changedata();
    });
        </script>
      </body>
    </html>

I am using changedata method for replacing ${doller} with the selected value in dropdown . but it is replacing the ${doller} only once. is there any replaceAll kind of method available for text in jquery ?

check out this question: http://stackoverflow.com/questions/1144783/replacing-all-occurrences-of-a-string-in-javascript — JSK NS, Dec 18 '14 at 10:07

score 0 · Answer 1 · answered Dec 18 '14 at 10:10

function changedata() {

        $("#datachange").text(function () {
            var re = new RegExp(value, 'g');
            return $(this).text().replace(re, $("#myselect option:selected" ).text() ); 
        });
        value = $("#myselect option:selected" ).text() ;
    }

score 0 · Answer 2 · answered Dec 18 '14 at 10:11

Use a regex

if (!RegExp.escape) {
  RegExp.escape = function(value) {
    return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
  };
}
$(document).ready(function() {
  var text = $("#datachange").text(),
    value1 = "${doller}",
    value2 = "${currency}",
    reg1 = new RegExp(RegExp.escape(value1), 'g'),
    reg2 = new RegExp(RegExp.escape(value2), 'g');

  function changedata() {
    $("#datachange").text(function() {
      return text.replace(reg1, $("#myselect").val());
    });
  }

  changedata();
  $('#myselect').on('change', function(e) {
    changedata();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid" id="printableArea">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:lavender;" id="datachange">
      <p>Lorem ipsum dolor sit amet, ${doller} adipisicing elit, sed do eiusmod tempor ${currency} ut labore et dolore magna aliqua.</p>
      <p> Ut enim ad minim veniam, quis ${doller} exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <div id="">
    <h1>Print me</h1>
  </div>
  <select id="myselect">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <select id="currency">
    <option value="doller">doller</option>
    <option value="euro">euro</option>
    <option value="rupees">rupees</option>
  </select>
</div>

How to replace a text multiple time with another text in jquery?

2 Answers2