使用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();" 

value =“全选” type =“ button”>

编辑这是我的新脚本，基于以下建议：

    $(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：

• 用$(document).ready(function(){...})调用替换window.onload调用。
• 考虑用$('#outPut2')替换document.getElementById
• 考虑用$(input[name=commLines])替换document.getElementsByName或向所有这些项添加一类comm-lines ，并使用$(.comm-lines)
• 考虑使用jQuery的on函数为内联按钮处理程序（将传递的函数用于on调用）和Inputs [i] .onchange调用绑定事件处理程序。

很抱歉，如果这听起来过于判断，请尝试提出一个更标准，更不易出错的解决方案。

仍然需要进行一些调整，但需要遵循以下原则：

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

---

另外，我确定这只是您要完成的工作的简化示例，但是您可以考虑使用链接或按钮而不是复选框。 您对复选框的使用并没有真正遵循用户在网络上使用复选框时所学的预期体验。 链接与大多数用户所了解的体验更加接近，因此对他们的影响较小。 （更少的惊喜意味着更快乐的用户，更少的学习和更多的使用。）