2017-09-21 6 views
1

以下の操作を行いたいと思います。テキスト入力から値を取得し、最初に文書全体に値があるかどうかを確認します。それがドキュメントで発生する場合、私はそれのすべてのインスタンスを2番目の変数の値で置き換えたいと思います。スクリプトから変数の値を文書に置き換えよう

スニペットのコードが正しくないため、機能の置き換えが機能しません... 誰かがそれを解決する方法を考えていますか?

ありがとうございます!

$(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>

答えて

0

これは、ドキュメントが読み込まれたときに変数 "置き換え"と "変更"あなたがボタンをクリックしたときではない。 これは@Phani Kumar Mの答えに対する説明です。

+0

ありがとうございます。それは大丈夫です! – Bix

0

の.text()を使用すると、その値のテキストのコピーを交換する(値を戻す)機能があるため。その結果を(例えば、置き換えられたテキストの名前の変数に)保存し、.text(replacedText)を再度割り当てる必要があります

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>

+0

ありがとうございます。私のコードの場合にも便利です。 – Bix

+0

答えとしてupvotingまたはマーキングはよいべきである –

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です。

関連する問題