Question

Within a web project I am using jQuery and javascript to build a query string for a user to use within a search tool. Since this is built on the fly by the user I take the fields and the values from the form and then add this to an array which is then pushed over to the search term in the ui.

Prior to passing this string to the UI I would like to format the string based upon keywords. (Example if the keyword BETWEEN all caps) is used in the query wrap the input fields following this keyword (there will be two) in parentheses. If the term CONTAINS is used wrap the succeeding field with asterisk and so on. Within JavaScript there is function for slice which allows me to insert text at an index within an array. Since I am looking for keywords within the array and not index values is there another function or approach that would support this.

below is the code for the creation/parsing of the input fields into the search term

//insert field after between option or remove it if it exists
    function insertFromField(param1, param2, param3) {
        if (param1 == "BETWEEN") {
            $("<input class='queryterm' type='text'name='fieldValue1' id='fieldvalue1' value='' size='15' /><span>&nbsp;TO&nbsp;</span>").insertAfter(param2);
        }
        if (param3 <= 2) {
            // do nothing  
        }
        else {
            $(param2).next().remove();
            $(param2).next().remove();
        }
    }

    //build query string from Query Builder  //TODO formatting on string return 
    function setQueryString() {
        checkField();
        var txt = $("input[name='tbsearchterm']");
        var fields = $("#queryFields :input").serializeArray();
        jQuery.each(fields, function (i, field) {
            if (txt) {
                txt.val(txt.val() + field.value + " ");
            }
        });
    }

//the UI contains an add button so the user can build their query at runtime for that i have the following:

$('#add').click(function () {
        $("<div class='additionalrow'><select class='queryterm' name='condition'><option  value='AND'>AND</option><option value='OR'>OR</option></select>&nbsp;&nbsp;"+ 
        "<select class='queryterm' name='condition'>" +
        "<option  value='address:'>Address</option>" +
        "<option  value='age:'>Age</option>" +

... edited for Brevity


        "</select>&nbsp;&nbsp;<select name='operator'class='operClass'><option id='opt1'>Equals</option><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select>&nbsp;&nbsp;<input type='text' class='queryterm' name='fieldValue1' id='fieldvalue1' value='' size='25' />&nbsp;&nbsp;<a href='#' id='btnRemove'><span class='advButtons'>Remove</span></a></div>").appendTo('#queryFields');
    });

Thanks in advance

Update to comments
Thanks for the reply for more clarification:
1. I am hoping to accomplish this preferably using jQuery but I am not opposed to using javascript if jQuery does not contain functions that support this in.

2 & 3. Contains will always have one value . Where contains will always have two. The function insertFromField is called when the selection is changed on the selector drop down menu

A full working sample can be viewed here jsFiddle

When you change the second selector you will see the additional input field added. This is triggered by the insertFromField function. This basically evaluates the entire div element and counts the number of input fields and adds or removes one accordingly.

I have also added some code to allow you to view the result in the UI.

The intended output would be when the word BETWEEN is used place parentheses around the values of the last two input field
so it would look something like this: AND Address 123 main street BETWEEN (17 18)

Sorry for not thinking of Fiddle earlier

Answer 1

Here ya go:

function setQueryString() {
  checkField();
  var txt = $("input[name='tbsearchterm']");
  var hit_between=0;
  var hit_contains=false;
  var ops={
    normal:   ["" ," " ]
    ,contains:["*","* "]
    ,between1:["("," " ]
    ,between2:[" ",") "]
  }
  if (txt) {
    jQuery.each(fields, function (i, field) {
      var v=field.value;
      if (false) {
      }else if (v=="CONTAINS") {
        if (hit_contains==false) {hit_contains=true;return;
        }else{
          //bad input; do something
        }
      }else if (v=="BETWEEEN"){
        if (hit_between==0) {hit_between++;return;
        }else{
          //bad input; do something
        }
      }else{
        var op='normal';
        if (false) {
        }else if (hit_contains)  {hit_contains=false;op='contains';
        }else if (hit_between==1){hit_between++;     op='between1';
        }else if (hit_between==2){hit_between=0;     op='between2';
        }else{
        }
        var nv=ops[op][0]+v+ops[op][1];
        txt.val(txt.val() +nv);
      }
    });
  }
}