How to capitalize first and third letter?

How to capitalize first and third letter? - javascript

I want to capitalize first letter and third letter in my textarea.
I can capitalize only first letter and then every next letters and words are transformed to lowercase.
If there is any solution for this problem, please tell me.
I am using AngularJS.
This is what im trying and did.
link: function (scope, iElement, iAttrs, controller) {
//console.log('init');
controller.$parsers.push(function (inputValue) {
var transformedInput = (!!inputValue) ? inputValue.charAt(0).toUpperCase() + inputValue.substr(1).toLowerCase() : '';
if (transformedInput != inputValue) {
controller.$setViewValue(transformedInput);
controller.$render();
}
return transformedInput;
});
This works only for first letter, it transforms to uppercase and then transforms another letter and words to lowercase.
I tried to change my code into this but nothing.
var transformedInput = (!!inputValue) ? inputValue.charAt(0).toUpperCase() + inputValue.substr(1).toLowerCase() + inputValue.charAt(3).toUpperCase() + inputValue.substr(4).toLowerCase(): '';

Have a look at this. Same as what you are doing just using for loop to identify the character index to modify.
var inputValue = "test";
var transformedInput = '';
if(inputValue){
for(var i=0; i<inputValue.length; i++){
if(i===0 || i=== 2){
transformedInput += inputValue.charAt(i).toUpperCase();
} else {
transformedInput += inputValue.charAt(i).toLowerCase();
}
}
}
console.log(transformedInput);

Here is a function to capitalize chars at specific positions
function capitalizeAtPositions(string, indexes) {
(indexes || []).forEach(function(index) {
if (string.length < index) return;
string = string.slice(0, index) +
string.charAt(index).toUpperCase() + string.slice(index+1);
});
return string;
}
Run it as follows:
var test = "abcdefg";
var result = capitalizeAtPositions(test, [0, 2]);
//AbCdefg
In your case i think it will be something like (can't test it without jsfiddle):
var transformedInput = capitalizeAtPositions(inputValue || '', [0, 2]);

My simple solution
var inputValue = 'your value';
function toUpper (str) {
var result = '';
for (var i = 0; i < str.length; i++) {
if (i === 0 || i === 2) {
result += str[i].toUpperCase();
} else {
result += str[i].toLowerCase();
}
}
return result;
}
var transformedInput = toUpper(inputValue);

Seeing how you need to have the input change as you type, you'll probably need a directive; here's a one to capitalize the given letters of any input with an ng-model:
https://plnkr.co/edit/hWhmjQWdrghvsL20l3DE?p=preview
app.directive('myUppercase', function() {
return {
scope: {
positions: '=myUppercase'
},
require: 'ngModel',
link: function(scope, elem, attrs, ngModelCtrl) {
scope.positions = scope.positions || []
function makeString(string) {
if (!string) return;
angular.forEach(scope.positions, function(pos) {
string = string.slice(0, pos) + string.slice(pos, pos+1).toUpperCase() + string.slice(pos + 1)
console.log(string)
})
return string;
}
ngModelCtrl.$parsers.push(makeString)
ngModelCtrl.$formatters.push(makeString)
}
}
})
HTML:
<input ng-model="value" my-uppercase="[0, 2]">

My solution for "McArturo" this type of text you want
$("#LastName").keyup(function () {
var last_name = $("#LastName").val();
var op = last_name.substr(0, 2);
if (op == "mc" || op == "Mc" || op == "MC") {
$("#LastName").val("Mc" + (last_name.charAt(2).toUpperCase()) + last_name.substr(3).toLowerCase());
} else {
$("#LastName").val(last_name.charAt(0).toUpperCase() + last_name.substr(1).toLowerCase());
}});

Related

add decimal point and thousand separator in to textbox

I am tying to add thousand separator and decimal point to my text box.
I am using below directive also
.directive('format', function ($filter) {
'use strict';
return {
require: '?ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!ctrl) {
return;
}
ctrl.$formatters.unshift(function () {
return $filter('number')(ctrl.$modelValue);
});
ctrl.$parsers.unshift(function (viewValue) {
var plainNumber = viewValue.replace(/[\,\.]/g, ''),
b = $filter('number')(plainNumber);
elem.val(b);
return plainNumber;
});
}
};
})
this is my Demo
i need to modify this.
When user enter 500,000, it should be like 500,000.00
and user can be enter 5000.50 also.
How i modify this, can u help

Take the decimal placement out of the users control.
num = 599993863737
num = str(num).replace('.','')
num = float(num[:len(num)-2]+'.'+num[-2:])
print(num)
5999938637.37

You can use toFixed() and regex
function currency(el){
a = parseFloat(el.value);
a = a.toFixed(2);
a=a.toString();
var b = a.replace(/[^\d\.]/g,'');
var dump = b.split('.');
var c = '';
var lengthchar = dump[0].length;
var j = 0;
for (var i = lengthchar; i > 0; i--) {
j = j + 1;
if (((j % 3) == 1) && (j != 1)) {
c = dump[0].substr(i-1,1) + ',' + c;
} else {
c = dump[0].substr(i-1,1) + c;
}
}
if(dump.length>1){
if(dump[1].length>0){
c += '.'+dump[1];
}else{
c += '.';
}
}
console.log(c);
}
<input type='text' onkeyup='currency(this)'>

How can I uppercase names with a dash -, apostrophe ' or space?

I have the following code which works well to convert data entered into the "Firstname" field in our data enrollment software application to uppercase and return the converted value back to the application.
However, it doesn't handle names with "-", "'" or spaces in them, for example Anne-Marie, Jean Jacques, O’Brian. Could someone please help me in adding a few lines of code to handle these name types as well as preserving my original code which works for standard names without these characters in? Here is my code.
var tc_event = changeValue();
function changeValue() {
// Parse the JSON string for script information.
var tcInfo = JSON.parse(TC_Info);
/* FROM ENGINEERING: The “TC_Info” variable contains the user id and IP address of the user running the script.
* We have at least one customer that wanted that information */
var userId = tcInfo.userId;
var ipAddress = tcInfo.ipAddress;
// Parse the JSON string for fields and properties.
var tcData = JSON.parse(TC_Event);
// The following several lines of code loops over the workflow fields passed in to the script and saves references to the fields named “Lastname” and “LastnameUppercase”
var Lastname, LastnameUppercase, Firstname, Firstname1stUppercase;
// Iterate through parsed JSON.
for (var index in tcData) {
// Fetch each field i.e each key/value pair.
var field = tcData[index];
// Find the fields to process.
if (field.name === 'Lastname') {
Lastname = field;
} else if (field.name === 'LastnameUppercase') {
LastnameUppercase = field;
} else if (field.name === 'Firstname') {
Firstname = field;
} else if (field.name === 'Firstname1stUppercase') {
Firstname1stUppercase = field;
} else if (field.name === 'PersNr') {
PersNr = field;
} else if (field.name === 'TikNr') {
TikNr = field;
}
}
// Were the fields found? If so, proceed.
if (Lastname && LastnameUppercase && Firstname && Firstname1stUppercase && PersNr && TikNr) {
// This line of code states the LastnameUppercase field value will be the Lastname field value in uppercase
LastnameUppercase.value = Lastname.value.toUpperCase();
Firstname1stUppercase.value = Firstname.value.charAt(0).toUpperCase() + Firstname.value.slice(1);
var strLtr = PersNr.value.substring(0, 2);
var strNum = PersNr.value.substring(2, 6);
if (strLtr === '00') {
strLtr = 'A';
} else if (strLtr === '01') {
strLtr = 'M';
} else if (strLtr === '31') {
strLtr = 'B';
} else if (strLtr === '71') {
strLtr = 'F';
}
TikNr.value = strLtr + strNum;
}
// Return the updated fields and properties.
return JSON.stringify(tcData);
}

This will capitalize both the firstName that do not contain symbols and the ones that do:
function capitalize(name) {
let capitalizedName = '';
const nameSplit = name.split(/\W/g);
const symbols = name.match(/\W/g);
for(let i = 0; i< nameSplit.length; i++) {
capitalizedName += nameSplit[i][0].toUpperCase() +
nameSplit[i].slice(1)
if(i < nameSplit.length -1) capitalizedName += symbols[i];
}
return capitalizedName
}

I have used this function successfully:
function capitalizeName(str) {
var result = str.replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
return result.replace(/\s\s+/g, ' ');
}
calling the function:
capitalName = capitalizeName(lowerCaseName)

Looks like you should change
Firstname1stUppercase.value = Firstname.value.charAt(0).toUpperCase() + Firstname.value.slice(1);
to
var delimiter = ''; //char value
if(Firstname.value.indexOf(' ') != -1){ //name has a space
delimiter = ' ';
}else if(Firstname.value.indexOf('-') != -1){ //name has -
delimiter = '-';
}else if(Firstname.value.indexOf('\'') != -1){ //name has a '
delimiter = '\'';
}
Firstname1stUppercase.value = Firstname.split(delimeter).map(function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}).join(delimeter);
The last line is what you were doing but written for any separating character be it a space, apostrophe, or hyphen.

You could split by non alphabetic letters, like this:
text.split(/[^A-Za-z]/);
inspired from here: Split string by non-alphabetic characters
Now, let's implement the function you need:
function myUpperCase(input) {
var parts = input.split(/[^A-Za-z]/);
var output = parts[0];
for (var i = 1; i < parts.length; i++) {
if (parts[i].length) parts[i] = parts[i][0].toUpperCase() + parts[i].substring(1);
output += input[output.length] + parts[i];
}
return output;
}

display the recursion line by line

I am trying to make a function in javascript that would expand/split a string with dashes and show the process ( line by line ) using recursion.
for example, the string "anna" would become:
expand("anna") = expand("an")+"---"+expand("na") ->
"a"+"---"+"n"+"---"+"n"+"---"+"a"
and the desired output would be:
anna
an---na
a---n---n---a
I have achieved doing the following so far (I know it might not be the solution I am looking):
expand("anna") = an+"---"+expand("na")
= an+"---"+n+"---"+expand("a");
= an+"---"+n+"---+"a"
the output I am getting is:
an---n---a
I can't seem to concatenate the head though to do the first example.
My javascript function of expand is as follows:
function expand(word) {
if (word.length<=1) {
return word;
} else {
mid = word.length/2;
return word.substr(0,mid) + " " + expand(word.substr(mid,word.length));
}
}
document.write(expand("anna"));
I would need some tips to do this, otherwise (if it's the wrong stackexchange forum), please guide me where to post it.

this is my crazy attempt
var Word = function(str) {
this.isSplitable = function() {
return str.length > 1;
}
this.split = function() {
var p = Math.floor(str.length / 2);
return [
new Word(str.substr(0,p)),
new Word(str.substr(p,p+1))
];
}
this.toString = function() {
return str;
}
}
var expand = function(words) {
var nwords = [];
var do_recur = false;
words.forEach(function(word){
if(word.isSplitable()) {
var splitted = word.split();
nwords.push(splitted[0]);
nwords.push(splitted[1]);
do_recur = true;
}else{
nwords.push(word);
}
});
var result = [];
nwords.forEach(function(word){
result.push( word.toString() );
});
var result = result.join("--") + "<br/>";
if(do_recur) {
return result + expand(nwords);
}else{
return "";
}
}
document.write( expand([new Word("anna")]) );

This is what you need
expand = function(word) {
return [].map.call(word, function(x) {return x+'---'}).join('')
};
The joy of functional programming.
And with added code to deal with last character:
function expand(word) {
return [].map.call(word, function(x, idx) {
if (idx < word.length - 1)
return x+'---';
else return x
}).join('')
}

As I said that it is impossible to display the "process" steps of recursion while using recursion, here is a workaround that will output your desired steps:
var levels = [];
function expand(word, level) {
if (typeof level === 'undefined') {
level = 0;
}
if (!levels[level]) {
levels[level] = [];
}
levels[level].push(word);
if (word.length <= 1) {
return word;
} else {
var mid = Math.ceil(word.length/2);
return expand(word.substr(0, mid), level+1) + '---' + expand(word.substr(mid), level+1);
}
}
expand('anna');
for (var i = 0; i < levels.length; i++) {
console.log(levels[i].join('---'));
}

to see all steps the best that I whold do is:
function expand(word) {
if (word.length<=1) {
return word;
} else {
var mid = word.length/2;
var str1 = word.substr(0,mid);
var str2 = word.substr(mid,word.length);
document.write(str1 + "---" + str2 + "<br></br>");
return expand(str1) + "---" + expand(str2);
}
}
document.write(expand("anna"));

You have to return the two parts of the string:
function expand(word) {
output="";
if (word.length<=1) {
output+=word;
return output;
} else
{
var mid = word.length/2;
output+=word.substr(0,mid)+"---"+word.substr(mid)+" \n";//this line will show the steps.
output+=expand(word.substr(0,mid))+"---"+expand(word.substr(mid,word.length-1))+" \n";
return output;
}
}
console.log(expand("anna"));
Edit:
I added the output var and in every loop I concatenate the new output to it.
It should do the trick.

Hope the problem is in your first part. According to your algorithm, you are splitting your string anna in to two parts,
an & na
so you need to expand both parts until the part length is less than or equal to one. so your required function is the below one.
function expand(word) {
if (word.length<=1) {
return word;
} else {
mid = word.length/2;
return expand(word.substr(0,mid)) + " --- " + expand(word.substr(mid,word.length));
}
}
document.write(expand("anna"));

How to replace only first sequential occurences (fuzzymatch)?

I'm trying to write "fuzzy" match and I can't find a way to solve this problem:
Data in: makrusakkk, query: mrk, expected result: <b>m</b>ak<b>r</b>usa<b>k</b>kk.
RegExp: "makrusakkk".match(/(m).*?(r).*?(k)/i) returns ["makrusak", "m", "r", "k"].
So the question is: is there a way to get the expected result using RegExp?

I think using regular expression for such problem makes things just more complicated. The following string and loop based solution would lead to the result:
function fuzzySearch(query, input) {
var inds = patternMatches(query, input);
if(!inds) return input;
var result = input;
for(var i = inds.length - 1; i >= 0; i--) {
var index = inds[i];
result = result.substr(0,index) +
"<b>" + result[index] + "</b>" +
result.substr(index+1);
}
return result;
}
function patternMatches(query, input) {
if(query.length <= 0) {
return [];
} else if(query.length == 1) {
if(input[0] == query[0]) return [0];
else return [];
} else {
if(input[0] != query[0])
return false;
var inds = [0];
for(var i = 1; i < query.length; i++) {
var foundInd = input.indexOf(query[i], inds[i-1]);
if(foundInd < 0) {
return [];
} else {
inds.push(foundInd);
}
}
return inds;
}
}
var input = "makrusakkksd";
var query = "mrk";
console.log(fuzzySearch(query, input));
console.log(patternMatches(query, input));
Here's a live demo too: http://jsfiddle.net/sinairv/T2MF4/

Here you will need for:
function search_for_it(txt, arr){
for(i=0;i<arr.length;i++){
var reg = new RegExp(arr[i], "i");
txt = txt.replace(reg, "<b>"+arr[i]+"</b>");
}
return txt;
}
search_for_it("makrusakkk", ["m","r","k"]);
//return "<b>m</b>a<b>k</b><b>r</b>usakkk"
PS: Your expected result is incorrect. There is a k after the first a.

is there a way to get an expected result using RegExp?
There is.
"makrusakkk".replace(/(m)(.*?)(r)(.*?)(k)/i, '<b>$1</b>$2<b>$3</b>$4<b>$5</b>')

I feel vaguely dirty for this, but...regardless; here's one way to do it:
$('#s').keyup(
function(e) {
var w = e.which;
if (w == 8 || w == 46) {
return false;
}
var listElems = $('ul:first li'),
search = $(this).val().replace(/w+/g, ''),
r = search.split(''),
rString = [];
$.each(r, function(i, v) {
rString.push('(' + v + ')');
});
var reg = new RegExp(rString.join('(\\d|\\D)*'), 'gi');
listElems.each(
function() {
if (!$(this).attr('data-origtext')) {
$(this).attr('data-origtext', $(this).text());
}
$(this).html($(this).attr('data-origtext').replace(reg, '<b>$&</b>'));
});
});
JS Fiddle demo.
It could, almost certainly, benefit from quite some simplification though.
References:
attr().
:first selector.
join().
keyup().
push().
RegExp().
replace().
split().
text().
val().

Toggle query string variables

I've been banging my head over this.
Using jquery or javascript, how can I toggle variables & values and then rebuild the query string? For example, my starting URL is:
http://example.com?color=red&size=small,medium,large&shape=round
Then, if the user clicks a button labeled "red", I want to end up with:
http://example.com?size=small,medium,large&shape=round //color is removed
Then, if the user clicks "red" again, I want to end up with:
http://example.com?size=small,medium,large&shape=round&color=red //color is added back
Then, if the user clicks a button labeled "medium", I want to end up with:
http://example.com?size=small,large&shape=round&color=red //medium is removed from list
Then, if the user clicks the labeled "medium" again, I want to end up with:
http://example.com?size=small,large,medium&shape=round&color=red //medium added back
It doesn't really matter what order the variable are in; I've just been tacking them to the end.

function toggle(url, key, val) {
var out = [],
upd = '',
rm = "([&?])" + key + "=([^&]*?,)?" + val + "(,.*?)?(&.*?)?$",
ad = key + "=",
rmrplr = function(url, p1, p2, p3, p4) {
if (p2) {
if (p3) out.push(p1, key, '=', p2, p3.substr(1));
else out.push(p1, key, '=', p2.substr(0, p2.length - 1));
} else {
if (p3) out.push(p1, key, '=', p3.substr(1));
else out.push(p1);
}
if (p4) out.push(p4);
return out.join('').replace(/([&?])&/, '$1').replace(/[&?]$/, ''); //<!2
},
adrplr = function(s) {
return s + val + ',';
};
if ((upd = url.replace(new RegExp(rm), rmrplr)) != url) return upd;
if ((upd = url.replace(new RegExp(ad), adrplr)) != url) return upd;
return url + (/\?.+/.test(url) ? '&' : '?') + key + '=' + val; //<!1
}
params self described enough, hope this help.
!1: changed from ...? '&' : '' to ... ? '&' : '?'
!2: changed from .replace('?&','?')... to .replace(/([&?]&)/,'$1')...
http://jsfiddle.net/ycw7788/Abxj8/

I have written a function, which efficiently results in the expected behaviour, without use of any libraries or frameworks. A dynamic demo can be found at this fiddle: http://jsfiddle.net/w8D2G/1/
Documentation
Definitions:
The shown example values will be used at the Usage section, below
  -   Haystack - The string to search in (default = query string. e.g: ?size=small,medium)
  -   Needle - The key to search for. Example: size
  -   Value - The value to replace/add. Example: medium.
Usage (Example: input > output):
qs_replace(needle, value)
If value exists, remove: ?size=small,medium > ?size=small
If value not exists, add: ?size=small > size=small,medium
qs_replace(needle, options)     Object options. Recognised options:
findString. Returns true if the value exists, false otherwise.
add, remove or toggleString. Add/remove the given value to/from needle. If remove is used, and the value was the only value, needle is also removed. A value won't be added if it already exists.
ignorecaseIgnore case while looking for the search terms (needle, add, remove or find).
separatorSpecify a separator to separate values of needle. Default to comma (,).
Note :   A different value for String haystack can also be defined, by adding it as a first argument: qs_replace(haystack, needle, value) or qs_replace(haystack, needle, options)
Code (examples at bottom). Fiddle: http://jsfiddle.net/w8D2G/1/:
function qs_replace(haystack, needle, options) {
if(!haystack || !needle) return ""; // Without a haystack or needle.. Bye
else if(typeof needle == "object") {
options = needle;
needle = haystack;
haystack = location.search;
} else if(typeof options == "undefined") {
options = needle;
needle = haystack;
haystack = location.search;
}
if(typeof options == "string" && options != "") {
options = {remove: options};
var toggle = true;
} else if(typeof options != "object" || options === null) {
return haystack;
} else {
var toggle = !!options.toggle;
if (toggle) {
options.remove = options.toggle;
options.toggle = void 0;
}
}
var find = options.find,
add = options.add,
remove = options.remove || options.del, //declare remove
sep = options.sep || options.separator || ",", //Commas, by default
flags = (options.ignorecase ? "i" :"");
needle = encodeURIComponent(needle); //URL-encoding
var pattern = regexp_special_chars(needle);
pattern = "([?&])(" + pattern + ")(=|&|$)([^&]*)(&|$)";
pattern = new RegExp(pattern, flags);
var subquery_match = haystack.match(pattern);
var before = /\?/.test(haystack) ? "&" : "?"; //Use ? if not existent, otherwise &
var re_sep = regexp_special_chars(sep);
if (!add || find) { //add is not defined, or find is used
var original_remove = remove;
if (subquery_match) {
remove = encodeURIComponent(remove);
remove = regexp_special_chars(remove);
remove = "(^|" + re_sep + ")(" + remove + ")(" + re_sep + "|$)";
remove = new RegExp(remove, flags);
var fail = subquery_match[4].match(remove);
} else {
var fail = false;
}
if (!add && !fail && toggle) add = original_remove;
}
if(find) return !!subquery_match || fail;
if (add) { //add is a string, defined previously
add = encodeURIComponent(add);
if(subquery_match) {
var re_add = regexp_special_chars(add);
re_add = "(^|" + re_sep + ")(" + re_add + ")(?=" + re_sep + "|$)";
re_add = new RegExp(re_add, flags);
if (subquery_match && re_add.test(subquery_match[4])) {
return haystack;
}
if (subquery_match[3] != "=") {
subquery_match = "$1$2=" + add + "$4$5";
} else {
subquery_match = "$1$2=$4" + sep + add + "$5";
}
return haystack.replace(pattern, subquery_match);
} else {
return haystack + before + needle + "=" + add;
}
} else if(subquery_match){ // Remove part. We can only remove if a needle exist
if(subquery_match[3] != "="){
return haystack;
} else {
return haystack.replace(pattern, function(match, prefix, key, separator, value, trailing_sep){
// The whole match, example: &foo=bar,doo
// will be replaced by the return value of this function
var newValue = value.replace(remove, function(m, pre, bye, post){
return pre == sep && post == sep ? sep : pre == "?" ? "?" : "";
});
if(newValue) { //If the value has any content
return prefix + key + separator + newValue + trailing_sep;
} else {
return prefix == "?" ? "?" : trailing_sep; //No value, also remove needle
}
}); //End of haystack.replace
} //End of else if
} else {
return haystack;
}
// Convert string to RegExp-safe string
function regexp_special_chars(s){
return s.replace(/([[^$.|?*+(){}\\])/g, '\\$1');
}
}
Examples (Fiddle: http://jsfiddle.net/w8D2G/1/):
qs_replace('color', 'red'); //Toggle color=red
qs_replace('size', {add: 'medium'}); //Add `medium` if not exist to size
var starting_url = 'http://example.com?color=red&size=small,medium,large&shape=round'
starting_url = qs_replace(starting_url, 'color', 'red'); //Toggle red, thus remove
starting_url = qs_replace(starting_url, 'color', 'red'); //Toggle red, so add it
alert(starting_url);

This is the solution for your task: http://jsfiddle.net/mikhailov/QpjZ3/12/
var url = 'http://example.com?size=small,medium,large&shape=round';
var params = $.deparam.querystring(url);
var paramsResult = {};
var click1 = { size: 'small' };
var click2 = { size: 'xlarge' };
var click3 = { shape: 'round' };
var click4 = { shape: 'square' };
var clickNow = click4;
for (i in params) {
var clickKey = _.keys(clickNow)[0];
var clickVal = _.values(clickNow)[0];
if (i == clickKey) {
var ar = params[i].split(',');
if (_.include(ar, clickVal)) {
var newAr = _.difference(ar, [clickVal]);
} else {
var newAr = ar;
newAr.push(clickVal);
}
paramsResult[i] = newAr.join(',');
} else {
paramsResult[i] = params[i];
}
}
alert($.param(paramsResult)) // results see below
Init params string
{ size="small, medium,large", shape="round"} // size=small,medium,large&shape=round
Results
{ size="small"} => { size="medium,large", shape="round"} //size=medium%2Clarge&shape=round
{ size="xlarge"} => { size="small,medium,large,xlarge", shape="round"} // size=small%2Cmedium%2Clarge%2Cxlarge&shape=round
{ shape="round"} => { size="small,medium,large", shape=""} //size=small%2Cmedium%2Clarge&shape=
{ shape="square"} => { size="small,medium,large", shape="round,square"} //size=small%2Cmedium%2Clarge&shape=round%2Csquare

productOptions is the only thing you need to modify here to list all the available options and their default state. You only need to use the public API function toggleOption() to toggle an option.
(function(){
//Just keep an object with all the options with flags if they are enabled or disabled:
var productOptions = {
color: {
"red": true,
"blue": true,
"green": false
},
size: {
"small": true,
"medium": true,
"large": true
},
shape: {
"round": true
}
};
//After this constructing query becomes pretty simple even without framework functions:
function constructQuery(){
var key, opts, qs = [], enc = encodeURIComponent, opt,
optAr, i;
for( key in productOptions ) {
opts = productOptions[key];
optAr = [];
for( i in opts ) {
if( opts[i] ) {
optAr.push( i );
}
}
if( !optAr.length ) {
continue;
}
qs.push( enc( key ) + "=" + enc( optAr.join( "," ) ) );
}
return "?"+qs.join( "&" );
};
//To toggle a value and construct the new query, pass what you want to toggle to this function:
function toggleOption( optionType, option ) {
if( optionType in productOptions && option in productOptions[optionType] ) {
productOptions[optionType][option] = !productOptions[optionType][option];
}
return constructQuery();
}
window.toggleOption = toggleOption;
})()
Example use:
// "%2C" = url encoded version of ","
toggleOption(); //Default query returned:
"?color=red%2Cblue&size=small%2Cmedium%2Clarge&shape=round"
toggleOption( "color", "red" ); //Red color removed:
"?color=blue&size=small%2Cmedium%2Clarge&shape=round"
toggleOption( "color", "blue" ); //Blue color removed, no color options so color doesn't show up at all:
"?size=small%2Cmedium%2Clarge&shape=round"
toggleOption( "color", "blue" ); //Blue color enabled again:
"?color=blue&size=small%2Cmedium%2Clarge&shape=round"
toggleOption( "shape", "round" ); //The only shape option removed
"?color=blue&size=small%2Cmedium%2Clarge"

I have tried this and this may give the desire result
<script>
var url='http://example.com?color=red&size=small,medium,large&shape=round';
var mySplitResult = url.split("?");
var domain=mySplitResult[0];
var qstring=mySplitResult[1];
var proparr=new Array();
var valarr=new Array();
var mySplitArr = qstring.split("&");
for (i=0;i<mySplitArr.length;i++){
var temp = mySplitArr[i].split("=");
proparr[i]=temp[0];
valarr[i]=temp[1].split(",");
}
function toggle(property,value)
{
var index;
var yes=0;
for (i=0;i<proparr.length;i++){
if(proparr[i]==property)
index=i;
}
if(index==undefined){
proparr[i]=property;
index=i;
valarr[index]=new Array();
}
for (i=0;i<valarr[index].length;i++){
if(valarr[index][i]==value){
valarr[index].splice(i,1);
yes=1;
}
}
if(!yes)
{
valarr[index][i]=value;
}
var furl=domain +'?';
var test=new Array();
for(i=0;i<proparr.length;i++)
{
if(valarr[i].length)
{
test[i]=valarr[i].join(",");
furl +=proparr[i]+"="+test[i]+"&";
}
}
furl=furl.substr(0,furl.length-1)
alert(furl);
}
</script>
<div>
<input id="color" type="button" value="Toggle Red" onclick="toggle('color','red')"/>
<input id="shape" type="button" value="Toggle shape" onclick="toggle('shape','round')"/>
<input id="size" type="button" value="Toggle Small" onclick="toggle('size','small')"/>
<input id="size" type="button" value="Toggle large" onclick="toggle('size','large')"/>
<input id="size" type="button" value="Toggle medium" onclick="toggle('size','medium')"/>
<input id="size" type="button" value="Toggle new" onclick="toggle('new','yes')"/>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How to capitalize first and third letter? - javascript

My simple solution var inputValue = 'your value'; function toUpper (str) { var result = ''; for (var i = 0; i < str.length; i++) { if (i === 0 || i === 2) { result += str[i].toUpperCase(); } else { result += str[i].toLowerCase(); } } return result; } var transformedInput = toUpper(inputValue);

Related

add decimal point and thousand separator in to textbox

How can I uppercase names with a dash -, apostrophe ' or space?

display the recursion line by line

How to replace only first sequential occurences (fuzzymatch)?

Toggle query string variables

Categories

Resources