附加子项后 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 Variables

var inputNumber = 1;

var regex = [/{input1}/g];

var inputArray = ["input1"];

//Generate

function 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 Input

function 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 inputvar regexInputs = /\{(input\d+)\}/g;//Generatefunction generate(){&nbsp; var doc = document.getElementById("doc");&nbsp; var inputs = doc.innerHTML.matchAll(regexInputs);&nbsp; var input = inputs.next();&nbsp; while(input.value){&nbsp; &nbsp; doc.innerHTML = doc.innerHTML.replace(&nbsp; &nbsp; &nbsp; input.value[0], document.getElementById(input.value[1]).value);&nbsp; &nbsp; input = inputs.next();&nbsp; };}function addInput(){&nbsp; var inputs = document.getElementById("inputs");&nbsp; var idxInput = inputs.children.length + 1;&nbsp; var newInput = document.createElement("div");&nbsp; newInput.innerHTML = "<p><input type='text' id='input"+ idxInput +"'> {input"+ idxInput +"}</p>";&nbsp; inputs.appendChild(newInput);}<div id = "doc" contentEditable="true">{input1} {input2}</div><div id = "inputs">&nbsp; <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#”。有了这个字符串，我们只做替换。