脚本将变量中的值替换为文档

时间:2017-09-21 11:38:21

标签: javascript jquery

我想采取以下措施:从文本输入中获取值,然后检查它们中的第一个是否出现在整个文档中。如果它出现在文档中,我想用第二个变量的值替换它的所有实例。

snipet中的代码不正确导致函数替换不起作用... 有谁知道如何解决它?

提前谢谢!

$(document).ready(function(){
    var replaced = $('#replaced').val();
    var modified = $('#modified').val();
    
    $('#submit').click(function(){
        if($( ".entireSite:contains(" + replaced + ")" ).text() === '') {
          alert('there is no wanted word/phrase at the website');
        } else {
          $('.entireSite').text().replace(replaced, modified);
        };
    });
});  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" id="replaced" value="word/phrase to modify"><br><br>
<input type="text" id="modified" value="new word/phrase"><br><br>
<input type="submit" value="submit" id="submit">
    
<div class="entireSite">    
<p>Lorem ipsum dolor sit amet, consectetur 
  adipiscing elit. Maecenas sed sollicitudin 
  lectus. Sed libero tellus, sodales quis eros
  eu, vestibulum interdum nibh. Nunc Lorem quis 
  diam vitae enim finibus pretium ut a ipsum. 
  Cras ut ullamcorper mi, vel fringilla augue. 
  Pellentesque Lorem consequat vulputate ipsum 
  sit amet faucibus. Aliquam erat orci, cursus 
  id tempor bibendum, condimentum vitae enim.</p>
</div>
</body>
</html>

4 个答案:

答案 0 :(得分:0)

As .text()是一个函数(返回一个值),你正在替换该值文本的副本。您应该保存该结果(例如,在名为replacementText的变量中)并使用.text(replacementText)再次分配它

答案 1 :(得分:0)

这种情况正在发生,因为您只设置变量&#34;替换&#34;和#34;修改&#34;加载文档时,而不是单击按钮时。 这是对@Phani Kumar M的回答的解释。

答案 2 :(得分:0)

我们走了!

我修复了代码上的一些问题,这样你就可以做到这一点^^

$(document).ready(function(){

    var toReplace = $('#toReplace');
    var replaceWith = $('#replaceWith');
    var par = $('.entireSite p');
    
    $('#submit').click(function(){
    
    var one = toReplace.val();
    var two = replaceWith.val();   
    while(par.text().indexOf(one) != -1){
    var txt = par.text();
    par.text(txt.replace(one,two));  
    }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" id="toReplace" placeholder="word/phrase to modify"><br><br>
<input type="text" id="replaceWith" placeholder="new word/phrase"><br><br>
<input type="button" value="submit" id="submit">
    
<div class="entireSite">    
<p>Lorem ipsum dolor sit amet, consectetur 
  adipiscing elit. Maecenas sed sollicitudin 
  lectus. Sed libero tellus, sodales quis eros
  eu, vestibulum interdum nibh. Nunc Lorem quis 
  diam vitae enim finibus pretium ut a ipsum. 
  Cras ut ullamcorper mi, vel fringilla augue. 
  Pellentesque Lorem consequat vulputate ipsum 
  sit amet faucibus. Aliquam erat orci, cursus 
  id tempor bibendum, condimentum vitae enim.</p>
</div>
</body>
</html>

答案 3 :(得分:0)

你可以这样做,

<强> HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <input type="text" id="replaced" value="Lorem">
  <br>
  <br>
  <input type="text" id="modified" value="Parag">
  <br>
  <br>
  <input type="submit" value="submit" id="submit">

  <div class="entireSite">
    <p id="finalResult">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed sollicitudin lectus. Sed libero tellus, sodales quis eros eu, vestibulum interdum nibh. Nunc Lorem quis diam vitae enim finibus pretium ut a ipsum. Cras ut ullamcorper mi, vel fringilla
      augue. Pellentesque Lorem consequat vulputate ipsum sit amet faucibus. Aliquam erat orci, cursus id tempor bibendum, condimentum vitae enim.</p>
  </div>
</body>

<强> JS:

$(document).ready(function() {
  $('#submit').click(function() {
    var replaced = $('#replaced').val();
    var modified = $('#modified').val();
    var finalText = $('#finalResult').text();

    if (finalText.indexOf(replaced) >= 0) {
      var temp = new RegExp(replaced, "g");
     $("#finalResult").text(finalText.replace(temp, modified));
    }
  });
});

这里有一个 FIDDLE