附加子项后 Regex.replace() 不起作用

Question

我正在尝试使用 Regex 构建一个基本的 mad lib 样式代码，但我无法创建新的输入元素并使它们的行为与初始元素相同。我试过换掉 (doc.replace(regex[i]... for (doc.replace(inputArray[i]... - 这部分工作，但最后我被困在输入值周围的括号中。<!-- HTML<div id = "doc" contentEditable="true">{input1} {input2}</div><div id = "inputs"><input type = "text" id = "input1"> {input1}</div><br><button onclick="generate()">Generate</button><button onclick="addInput()">Add Input</button></div>-->//Global Variablesvar inputNumber = 1;var regex = [/{input1}/g];var inputArray = ["input1"];//Generatefunction generate(){for (var i = 0; i < inputArray.length; i++) {var doc = document.getElementById("doc").innerHTML;var outputArray = document.getElementById(inputArray[i]).value;document.getElementById("doc").innerHTML = (doc.replace(regex[i], outputArray))};};//Add Inputfunction addInput(){    inputNumber++;    var inputs = document.getElementById("inputs");    var newInput = document.createElement("div");    newInput.innerHTML = "<p><input type='text' id='input"+inputNumber+"'> {input"+inputNumber+"}</p>";    inputs.appendChild(newInput);    inputArray.push("input"+inputNumber);    regex.push("/{input"+inputNumber+"}/g")};我希望 {input2} 在调用函数 generate() 时成为 ID 为 'input2' 的输入值。直接说是行不通的。

Answer 1

这是我的测试代码片段。

//Global Variables

// RegEx save input

var regexInputs = /\{(input\d+)\}/g;

//Generate

function generate(){

  var doc = document.getElementById("doc");

  var inputs = doc.innerHTML.matchAll(regexInputs);

  var input = inputs.next();

  while(input.value){

    doc.innerHTML = doc.innerHTML.replace(

      input.value[0], document.getElementById(input.value[1]).value);

    input = inputs.next();

  };

}

function addInput(){

  var inputs = document.getElementById("inputs");

  var idxInput = inputs.children.length + 1;

  var newInput = document.createElement("div");

  newInput.innerHTML = "<p><input type='text' id='input"+ idxInput +"'> {input"+ idxInput +"}</p>";

  inputs.appendChild(newInput);

}

<div id = "doc" contentEditable="true">{input1} {input2}</div>

<div id = "inputs">

  <input type = "text" id = "input1"> {input1}

</div>

<br>

<button onclick="generate()">Generate</button>

<button onclick="addInput()">Add Input</button>

</div>

<script src="script.js" type="text/javascript"></script>

注意： regexInputs 是匹配所有输入和存储 (input\d+) 的模式，因此使用 matchAll 我们遍历所有匹配项。每个匹配都有两个索引，0 有“{input#}”，1 有“input#”。有了这个字符串，我们只做替换。