jQuery - 使用下一个按钮填写文本区域中的变量

Question

我有一个文本区域，其中填充了带有 @variable 的文本，用户需要将其替换为在输入字段中输入的任何内容，然后转到下一个 @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 查看文本区域的内容，找到变量，替换它，然后移至下一个？

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

我创建了一个 fiddle 来开始它 https://jsfiddle.net/t3kkgvbg/7/

Answer 1

这样的事情听起来怎么样？如果没有额外的标志，替换函数只会替换第一个条目，因此这对于我们的问题非常有效。每次替换我们都需要调用一次。

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

其中 myNewString 是您想要替换条目“@variable”的值。如果我们愿意，可以将其写成一行行，但为了清晰起见，我们将其写在几行中。

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