Question

我想用另一个单词替换html中的文字。为此，我使用jquery的替换方法。如果单词只出现一次，它工作正常。但如果这个词出现多次，我怎么能取而代之。这是我的HTML代码

 <!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>

我正在使用changeata方法将$ {doller}替换为下拉列表中的选定值。但它只替换$ {doller}一次。在jquery中有没有替换所有可用于文本的方法？

Answer 1

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

Answer 2

使用正则表达式

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>

如何在jquery中用另一个文本多次替换文本？

2 个答案: