用表单替换单词（Javascript）

Question

假设 textarea 是这样的：

<textarea name="p[body]" id="p_body">

--Lorem ipsum-- dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et --Dolore-- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. --Duis aute-- irure dolor in reprehenderit in voluptate velit esse cillum --Dolore-- eu fugiat nulla pariatur.

</textarea>

我想替换用“--”包围的单词。我提取单词：

var text = document.getElementById('p_body').value;
var res = text.match(/--\w+\s*\w*--/g);

 //remove duplicates
uniqueArray = res.filter(function(item, pos, self) {
  return self.indexOf(item) == pos;
});

 //remove "--" parts
finalArray = uniqueArray.map(function(item) {
  return item.replace(/--/g,"");
});

获取finalArray = ["Lorem ipsum", "Dolore", "Duis aute"];

我的问题是：如何根据finalArray 生成一个表单，用它来替换textarea中“--”包围的单词。 （finalArray 并不总是有相同数量的元素）。

生成的表单可能如下所示：

<form>
Lorem ipsum:<br>
<input type="text" name="Lorem ipsum" value="">
<br>
Dolore:<br>
<input type="text" name="Dolore" value="">
<br>
Duis aute:<br>
<input type="text" name="Duis aute" value="">
<br><br>
<input type="submit" value="Replace">
</form> 

Answer 1

你的意思是像

if (!RegExp.escape) {
  RegExp.escape = function(value) {
    return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
  };
}

var text, finalArray, p_form = document.getElementById('p_form'),
  p_form_body = p_form.querySelector('.body'),
  clone = document.getElementById('form-input-clone'),
  p_body = document.getElementById('p_body'),
  result = document.getElementById('result');
document.getElementById('prepare').addEventListener('click', function() {
  text = p_body.value;
  var res = text.match(/--\w+\s*\w*--/g);

  //remove duplicates
  var uniqueArray = res.filter(function(item, pos, self) {
    return self.indexOf(item) == pos;
  });

  //remove "--" parts
  finalArray = uniqueArray.map(function(item) {
    return item.replace(/--/g, "");
  });

  p_form.style.display = 'block';
  p_form_body.innerHTML = '';
  p_body.readOnly = true;
  finalArray.forEach(function(value) {
    var node = clone.cloneNode(true);
    node.id = '';
    node.querySelector('span').innerHTML = value;
    p_form_body.appendChild(node);
  });
}, true);

document.getElementById('replace').addEventListener('click', function(e) {
  e.preventDefault();
  var content = text;
  [].slice.apply(p_form_body.querySelectorAll('label')).forEach(function(lbl) {
    var type = lbl.querySelector('span').innerHTML,
      value = lbl.querySelector('input').value;
    var regex = new RegExp('--' + RegExp.escape(type) + '--', 'g');
    content = content.replace(regex, value);
  });
  result.innerHTML = content;
}, true);

#p_form,
#form-input-clone {
  display: none;
}

<textarea name="p[body]" id="p_body">--Lorem ipsum-- dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et --Dolore-- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. --Duis aute--
  irure dolor in reprehenderit in voluptate velit esse cillum --Dolore-- eu fugiat nulla pariatur.</textarea>
<button id="prepare">Prepare</button>
<form id="p_form">
  <div class="body"></div>
  <button id="replace">Replace</button>
</form>
<div id="form-input-clone">
  <label><span></span>
    <input />
  </label>
</div>
<div id="result"></div>