使用RegEx和.replace以用户输入替换文本？

Question

我是jQuery的新手，偶然发现了RegEx的概念，使用.replace来创建漂亮的文本替换。

在我的形式，我有一些复选框触发的文字出现在文字区域。还有一些用户输入区域作为字段。

如何使用此jQuery替换某些文本的一部分与用户输入的复选框，但不在其他人？我想用一个if/else参数来触发RegEx，替换是关键，但我不知道如何合并其余的？

这里是我的形式的样机：

<div style="width: 500px;"><br> 
Static options:<br> 
<label id="_comLine100"><input id="comLine100" name="comLines" type="checkbox"> OPTION1 </label> <br> 
<label id="_comLine101"><input id="comLine101" name="comLines" type="checkbox"> OPTION2 </label> <br> 
Options which can be modified by user text:<br> 
<label id="_comLine102"><input id="comLine102" name="comLines" type="checkbox"> OPTION3 </label> <br> 
<label id="_comLine103"><input id="comLine103" name="comLines" type="checkbox"> OPTION4</label> <br> 
</div> 
<br> 
<input id="usrinput1" size="50" placeholder="Enter something to replace the word Text"> 
<br><br> 
<form> 
<input onclick="javascript:this.form.outPut2.focus();this.form.outPut2.select();" 

值= “全选” TYPE = “按钮”>

编辑这里是我的新脚本，根据以下建议：

$(document).ready(function(){ 
var comLines = { 
comLine100: 'Text for option1 \n', 
comLine101: 'Text for option2 \n', 
comLine102: 'Text for option3 \n', 
comLine103: 'Text for option4 \n' 
}; 

var mytextbox = document.getElementById('outPut2'); 
var chosenComm = null; 

var Inputs = document.getElementsByName("comLines"); 
for (var i = 0; i < Inputs.length; i++) { 
    Inputs[i].onchange = function() { 
     chosenComm = this; 
     printComment();   
    }; 
    } 

function printComment(){ 
    if(chosenComm !== null){ 
     var chxbox=chosenComm.id; 
     var uinput = document.getElementById('usrinput1'); 
      if(uinput.value!=="" && (chxbox=="comLine102" || chxbox=="comLine103")){ 
       mytextbox.value += comLines[chosenComm.id].replace(/Text/, $('#usrinput1').val()) + "\n"; 
       // resets the radio box values after output is displayed 
       chosenComm.checked = false; 
       // resets these variables to the null state 
       chosenComm = null; 
      } 
      else { 
       mytextbox.value += comLines[chosenComm.id] + "\n"; 
       // resets the radio box values after output is displayed 
       chosenComm.checked = false; 
       // resets these variables to the null state 
       chosenComm = null; 
      } 
    } 
} 

}); 

看到我JSfiddle：http://jsfiddle.net/bENAY/2/

现在按我的意思工作。感谢Eric S的解释和指导！

Answer 1

答案很简单替换：

mytextbox.value += comLines[chosenComm.id] + "\n"; 

与

mytextbox.value += comLines[chosenComm.id].replace(/Text/, $('#usrinput1').val()) + "\n"; 

的replace调用看起来在斜线正则表达式，并用逗号后的值替换匹配。

$('#usrinput1').val()正在使用jQuery来查找ID为usrinput1的dom元素，然后获取它的值（因为它是一个输入，它会得到用户输入的任何内容）。

---

的更完整的答案会提到，你应该更多的拥抱的jQuery：

• 更换window.onload呼叫与电话$(document).ready(function(){...})。
• 考虑更换document.getElementById与$('#outPut2')
• 考虑document.getElementsByName与$(input[name=commLines])更换或添加一类comm-lines所有这些项目，并使用$(.comm-lines)
• 考虑使用jQuery的on功能绑定的事件处理程序都内嵌按钮处理程序（使用传入函数调用on）和Inputs [i] .onchange调用。

对不起，如果这听起来过于审慎，只是试图建议一个更标准，更不容易出错的解决方案。

仍然需要一些调整，但一些沿此线：

$('.comm-lines').on('change', printComment); 

---

而且，我敢肯定，这是你要完成的只是一个简单的例子，但你可能会考虑使用链接或按钮而不是复选框。您在使用复选框时并不真正遵循您的用户在网上使用复选框时学到的预期体验。链接与大多数用户所了解的体验更贴近，因此不会让他们感到惊讶。 （减少惊喜意味着更快乐的用户，更少的学习和更多的使用。）