1

私はjQueryを初めて使用し、.replaceを使用して気の利いたテキスト置換を行うRegExの概念に出くわしました。

私のフォームには、テキストがテキストエリアに表示されるようにするチェックボックスがいくつかあります。フィールドとしていくつかのユーザー入力領域もあります。

この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="すべて選択" type="button">

EDIT以下の提案に基づいた新しいスクリプトを次に示します。

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

また、これはあなたが達成しようとしていることの単なる単純化された例であると確信していますが、チェックボックスの代わりにリンクまたはボタンを使用することを検討するかもしれません。チェックボックスの使用は、Webでチェックボックスを使用するときにユーザーが学習した期待されるエクスペリエンスに実際には従いません。リンクは、ほとんどのユーザーが知っているエクスペリエンスとより密接に一致するため、ユーザーの驚きは少なくなります。（驚きが少ないということは、ユーザーが幸せになり、学習が減り、使用量が増えることを意味します。）

于 2013-03-12T14:39:44.473 に答える