Question

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

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

如何使用此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”＆gt;

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

    $(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);

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

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

1 个答案: