javascript - 使用 RegEx 和 .replace 替换用户输入的文本？

Question

我是 jQuery 的新手，偶然发现了 RegEx 的概念和 .replace 来进行漂亮的文本替换。

在我的表单中，我有一些复选框可以触发文本出现在文本区域中。还有一些用户输入区域作为字段。

我如何使用此 jQuery 将某些复选框中的部分文本替换为用户输入，而不是其他复选框？我认为使用 if/else 参数来触发正则表达式并替换是关键，但我不知道如何合并其余部分？

这是我的表单模型:

<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="Select all" 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:

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

抱歉，如果这听起来过于主观，我只是想提出一个更标准、更不容易出错的解决方案。

仍然需要一些调整，但大致如下:

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

---

另外，我确信这只是您要完成的一个简化示例，但您可以考虑使用链接或按钮而不是复选框。您对复选框的使用并没有真正遵循您的用户在网络上使用复选框时所获得的预期体验。链接更符合大多数用户的体验，因此不会给他们带来惊喜。 (更少的惊喜意味着更快乐的用户，更少的学习和更多的使用。)