1

我是 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="按钮">

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

    $(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 的解释和指导！

4

1 回答 1

2

简单的答案是替换：

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

和

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

该replace调用在斜杠中查找正则表达式，并将匹配项替换为逗号后面的值。

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

更完整的答案会提到你可能应该更多地接受 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);

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

于 2013-03-12T14:39:44.473 回答