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

---

另外，我確定這只是您要完成的工作的簡化示例，但是您可以考慮使用鏈接或按鈕而不是復選框。 您對復選框的使用並沒有真正遵循用戶在網絡上使用復選框時所學的預期體驗。 鏈接與大多數用戶所了解的體驗更加接近，因此對他們的影響較小。 （更少的驚喜意味着更快樂的用戶，更少的學習和更多的使用。）