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

值= 「全選」 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的解釋和指導！

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

---

而且，我敢肯定，這是你要完成的只是一個簡單的例子，但你可能會考慮使用鏈接或按鈕而不是複選框。您在使用複選框時並不真正遵循您的用戶在網上使用複選框時學到的預期體驗。鏈接與大多數用戶所瞭解的體驗更貼近，因此不會讓他們感到驚訝。 （減少驚喜意味着更快樂的用戶，更少的學習和更多的使用。）