Question

我有一个带有@variable文本的textarea，用户需要将它们替换为输入字段中的任何内容，然后转到下一个@variable。

HTML：

<textarea name="description" id="description">
Today is @variable. Tomorrow is @variable. More text here and here and here. 
What is 3 x 4? @variable
</textarea>
<input name="variable_fill" id="variable" type="text">
<div id="button_change"><button id="find_next">Start</button></div>

使用Javascript：

$(function() {
$("#find_next").on("click", function(e) {
$(variable).focus();
    $(button_change).html('<button id="find_next">Next</button>');

    // Find the first @variable in the textarea, user fills in the variable using the text field,then clicks nexts, it replaces the @variable with what they typed, then moves on to the next @variable, and so on. When all @variable are filled out the "Next" button dissapears 
    });
    var variable_count = 3 // After a @variable is filled out and replaced count reduces
    if(variable_count == 0){
    $(button_change).text('Finished Filling Out Variables!');
    }
});

单击按钮后如何告诉javascript查看textarea的内容，找到变量，替换它然后转到下一个？

是否可以用背景颜色突出显示“@variable”，以便用户知道他们填写了哪个“@varible”？

我创造了一个小提琴来开始它 https://jsfiddle.net/t3kkgvbg/7/

Answer 1

val = $('#description').val();
var variable_count = (val.match(/@variable/g) || []).length;

if(variable_count == 0){
    $(button_change).text('Finished Filling Out Variables!');
    }else{
   val = val.replace(/@variable/,"Replacement");
$('#description').val(val);
}

演示：https://jsfiddle.net/t3kkgvbg/8/

Answer 2

这样的事听起来怎么样？如果没有其他标志，替换功能只会替换第一个条目，因此这对我们的问题很有效。我们需要为每次更换都拨打一次。

function setVariable(myNewString) {
  var myTextArea = $("#description");
  var myText = myTextArea.val();
  myText = myText.replace("@variable", myNewString);
  myTextArea.val(myText);
}

其中myNewString是您要替换条目的值＆＃34; @ variable＆＃34;用。如果我们愿意，可以将其制作成oneliner，但为了清楚起见，已经写成了几行。

这不会突出显示文本，这将是一个不同的问题。

Answer 3

脚本 -

 <script>
        $(function () {
            $("#find_next").on("click", function () {              
                //replace text 
$("#description").text($("#description").text().replace("@variable",$("#variable").val()));
                    $("#variable").val('');//make text box blank
                    if ($("#description").text().split("@variable").length == 1) {
                        $("#button_change").html("Finished Filling Out Variables!");
                    }
                });
            });
        </script>

你的Html应该是

    <textarea name="description" id="description">
    Today is @variable. Tomorrow is @variable. More text here and here and here. 
    What is 3 x 4? @variable
    </textarea>
    <input name="variable_fill" id="variable" type="text">
    <div id="button_change">
        <button id="find_next">Start</button>
    </div>

Answer 4

你可以这样做：

它的作品

$(function() {
  $("#find_next").click(function() {
     // if presence of @variable
     if($('#description').html().indexOf('@variable') > -1){
       $('#description').html($('#description').html().replace("@variable",$('#variable').val()));
       $('#variable').val("");    
     }

     if(!($('#description').html().indexOf('@variable') > -1)){
         $(button_change).text('Finished Filling Out Variables!');
     }
  });
});

请参阅https://jsfiddle.net/t3kkgvbg/9/

Answer 5

你在这里： - ）

$(function() {  
  var variable_count = $("#description").html().split("@variable").length - 1;
  var count = 0;   
  $("#find_next").on("click", function(e) {
    var value = $("#variable").val();
    if (value == "") return;   
    $(this).html("Next");  
    $("#description").find(".mark").first().replaceWith(value);    
    $("#variable").val('').focus();
    count += 1;   
    if (count == variable_count) {
      $("#variable").hide();
      $("#button_change").html('Finished Filling Out Variables!');
    }
  });
});

#description {
  width: 300px;
  height: 200px;
  font-size: 16px;
  line-height: 1.5em;
}

#variable {
  width: 200px;
  height: 25px;
  font-size: 16px;
}

button {
  padding: 10px;
}

.mark {
  background-color: green;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <div name="description" id="description">
    Today is <span class="mark">@variable</span>. Tomorrow is <span class="mark">@variable</span>. More text here and here and here. What is 3 x 4? <span class="mark">@variable</span>.
  </div>
</p>
<input name="variable_fill" id="variable" type="text">
<div id="button_change">
  <button id="find_next">Start</button>
</div>

jQuery - 使用下一个按钮

5 个答案: