テキストボックスのURL値をregexpに置き換えます。

Question

"fileid"、幅と高さを渡すサーバーサイズのイメージストリームがあり、クライアントにイメージをストリームします。私はCKEditorを使用していて、テキストボックスの高さや幅が変更されたときにurlを変更するjquery関数を追加したいと考えています。あなたは、PICに、ここでその特定のフォーマットを参照したよう

：

/コンテンツ/画像/ {数字}/{幅}/{高}残りは、文字列内のオプションです。

テキストボックスのIDは「txtwidth」と「txtheight」です。urlテキストボックスの幅と高さを置き換えるjquery機能をどのように追加しますか？/ Content/Image /桁}/{幅}/{高さ}？事前に

おかげ

/ラッセ

Answer 1

あなたは、文字列にマッチすると、対応する部品を交換するために正規表現を使用して簡単に行うことができます。 jQueryでこれをやりたければ、あなたのサイトに既にjQueryがあると仮定していますが、もしそうでなければ、これを追加することはお勧めしません。代わりに何をすべきかをさらに説明するの

、私は以下のコードを貼り付けし、何が起こっているのか、それは非常に明確にする必要があり、各ステップを、コメントしました：

// bind onchange and keypress events to the width and height text boxes 
$('#txtwidth, #txtheight').bind('change keypress', function(){ 

    // define the regexp to which to test with, edit as needed 
    var re = /\/Content\/Image\/([0-9]+)\/[0-9]+\/[0-9]+\//, 
     // store url and its value to a variable so we won't have to retrieve it multiple times 
     url = $('#url'), 
     val = url.val(); 

    // test if regexp matches the url 
    if (!re.test(val)) { 
     // doesn't match 
     return;  
    } 

    // we got this far, so it did match 

    // replace the variables in the regexo 
    val = val.replace(re, "/Content/Image/$1/" + $("#txtwidth").val() + "/" + $("#txtheight").val() + "/"); 

    // put it back into the input field 
    url.val(val); 

}); 

例：http://jsfiddle.net/niklasvh/wsAcq/

Answer 2

はのは、言ってみましょうURLフィールドにHTML ID「fileUrl」が含まれていることを確認します。その値に正規表現と等価である：私は/グラム（\ D +）/示唆するつもりだった

$("#txtwidth").change(function() 
{ 
    var value=$("#fileUrl").val(); 
    $("#fileUrl").val(value.replace(/^\/Content\/Image\/(\d+)\/(\d+)\/(\d+)/, "/Content/Image/$1/"+$("#txtwidth").val()+"/$3")); 
}); 

$("#txtheight").change(function() 
{ 
    var value=$("#fileUrl").val(); 
    $("#fileUrl").val(value.replace(/^\/Content\/Image\/(\d+)\/(\d+)\/(\d+)/, "/Content/Image/$1/$2/"+$("#txtheight").val())); 
}); 

Answer 3

：ここ

/^\/Content\/Image\/(\d+)\/(\d+)\/(\d+)/ 

は、迅速な提案（テストしていないと、すべてでは最適化されていない）であります

<div id="replace_this">/Content/Image/56/1024/768</div> 

var newWidth = 2048; 
var newHeight = 384; 
var matches = $('#replace_this').html().match(/(\d+)/g); 
newHTML = $('#replace_this').html().replace(matches[1], newWidth); 
newHTML = newHTML.replace(matches[2], newHeight); 
$('#replace_this').html(newHTML); 

http://jsfiddle.net/qpmuT/

Answer 4

私はあること（Niklas' answerと同様のアプローチを提案するつもりでした私は何か重要な、またはおそらくリスで中断された前）。だからそれと一緒に行く（と私から+1）。

ポイントのカップルは、しかし：

• はwidthとheightフィールドの内容を検証します。または、少なくともparseIntを使用してください。そうでない場合、ユーザーが数字以外の文字を入力すると、正規表現は一致を停止します。
• [0-9]+の代わりに[0-9]*に一致します。後者は、ユーザがフィールドを空のままにした場合に正規表現を壊すでしょう。もちろん、val = parseInt(...) || 0を実行しても問題は解決します。言い換えれば

、私はこのような何かしたい：

JSFiddle：http://jsfiddle.net/PPvG/j8dT9/

var re = /\/Content\/Image\/([0-9]*)\/[0-9]*\/[0-9]*\//, 
    url = $('#url'), 
    val = url.val(), 
    width = parseInt($("#txtwidth").val(), 10) || 0, 
    height = parseInt($("#txtheight").val(), 10) || 0; 

if (re.test(val)) { 
    val = val.replace(re, "/Content/Image/$1/" + width + "/" + height + "/"); 
    url.val(val); 
} 

また、パス（/Content/Image/）は、将来的に変更される可能性がある場合には、あなたが使用することができますがこのより一般的な正規表現：/^\/(.+)\/([0-9]*)\/[0-9]*\/[0-9]*\//と置換文字列は/$1/$2/で始まります。 （this JSFiddleを参照してください。）

最後に、私はkeypressにバインドしません。一部のブラウザで起こりうる副作用（例えば、changeイベントが処理されないなど）以外にも、UXに関する懸念があります。ほとんどのユーザーはblurに入力を処理するウィジェットを入力するために使用されます。なぜならそれらのネイティブアプリはそのように機能するからです。さらに、多くのユーザーは数字を入力するときにキーボードを見ます（数字パッドはまれになってきています）。