// Изменяет URL в формате key/value
// Возвращяет изменный URL

function UpdateQueryString(key, value, url) {
    if (!url) {
        url = window.location.href;
    }

    var re = new RegExp("([/])" + key + "/.*?(/|$)", "gi");
    var separator = '/';

    if (url.match(re)) {
        return url.replace(re, '$1' + key + "/" + value + '$2');
    }
    else {
        return url + separator + key + "/" + value;
    }
}

Функция на javascript для генерации масива БЭМ модификаторов. Использую такую в jade.

На вход тербует json обьект вида

{
 	'base': 'block',
 	'mods': [
 		'key': 'value',
 		'key2': 'value2'
 	]
}

Возвращяет масив вида ['block', 'block_key_value', 'block_key2_value2']

-
	var _mods = function (data) {
		var mods = [data.base];
		if (data.mods) {
			data.mods.forEach(function(mod, index) {
				if (typeof mod === "string") {
					mods.push(mods[0] + '_' + mod);
				}
				else {
					for (var key in mod) {
						var val = mod[key];
						if (key === "mod") {
							mods.push(mods[0] + '_' + val);
						}
						else {
							mods.push(mods[0] + '_' + key + '_' + val);
						}
					}
				}
			});
		}
		return mods;
	};

Примеры использования

//- Test 1 key/value
- var myMods = _mods({'base': 'module-name', 'mods': [{'key': 'value'}, {'key2': 'value2'}]});
div(class=myMods)= myMods

//- Test 2 value
- var myMods = _mods({'base': 'module-name', 'mods': ['mod1', 'mod2']});
div(class=myMods)= myMods

//- Test 3 mixed
- var myMods = _mods({'base': 'module-name', 'mods': [{'key': 'value'}, {'key2': 'value2'}, {'mod': 'mod1'}, {'mod': 'mod2'}]});
div(class=myMods)= myMods

//-//////////////////////////////////////////////////////////
//- Mixins
//-//////////////////////////////////////////////////////////
button-style(color, color-hover, background, background-hover, border, border-hover)
	&
	&:visited
		color color
		background-color background
		if border
			border-color border

	&:focus
	&:hover
	&:active
		if color-hover
			color color-hover
		else
			color color

		if background-hover
			background-color background-hover
		else
			background-color background - 10%

		if border-hover
			border-color border-hover
		else
			if border
				border-color border - 25%

	&:active
		background-image none

	&.button
		&_disabled
		&[disabled]
			&
			&:hover
			&:focus
			&:active
				color color
				background-color background
				border-color border

button-size(padding, font-size, line-height)
	padding padding
	font-size font-size
	if line-height
		line-height line-height

//-//////////////////////////////////////////////////////////
//- Base style
//-//////////////////////////////////////////////////////////
.button
	display inline-block
	margin-bottom 0
	font-weight normal
	text-align center
	vertical-align middle
	touch-action manipulation
	cursor pointer
	background-image none
	border-color transparent
	border-style solid
	border-width 0
	border-radius 0
	white-space nowrap
	line-height normal
	-webkit-user-drag none
	-webkit-user-select none
	-moz-user-select none
	-ms-user-select none
	user-select none
	box-sizing border-box
	text-decoration none
	background-color transparent
	padding 0
	transition 125ms all ease-in-out

	&__icon
	&__text
		display inline-block
		vertical-align middle
		line-height 1

	&__icon + &__text
	&__text + &__icon
		margin-left 8px

	&__icon
		fill currentColor

	&:focus
	&:active:focus
		outline thin dotted
		outline 5px auto -webkit-focus-ring-color
		outline-offset -2px

	&:hover
	&:focus
		color #333333
		text-decoration none

	&:active
	&_active
		outline 0
		background-image none
		box-shadow inset 0 3px 5px rgba(0 0 0 0.125)

	&_disabled
	&[disabled]
		&
		&:hover
		&:focus
		&:active
			opacity 0.65
			box-shadow none
			outline none

	a&_disabled
		pointer-events none

//- Block button
.button_block
	display: block;
	width: 100%;

	& + &
		// margin-top: 10px;

	input[type="submit"]&
	input[type="reset"]&
	input[type="button"]&
		width: 100%;


//-//////////////////////////////////////////////////////////
//- Button sizes
//-//////////////////////////////////////////////////////////

.button
.button_size_normal
	button-size(
		padding: 18px 20px,
		font-size: 18px,
		line-height: 1.4
	)

.button_size_extra-large
	button-size(
		padding: 26px 32px,
		font-size: 22px,
		line-height: 1.4
	)

.button_size_large
	button-size(
		padding: 22px 28px,
		font-size: 20px,
		line-height: 1.4
	)

.button_size_small
	button-size(
		padding: 10px 18px,
		font-size: 16px,
		line-height: 1.4
	)

.button_size_extra-small
	button-size(
		padding: 6px 12px,
		font-size: 14px,
		line-height: 1.4
	)


//-//////////////////////////////////////////////////////////
//- Styles and colors
//-//////////////////////////////////////////////////////////

// Ghost
.button_style_ghost
	border-width 1px

.button_style_ghost.button_color_white
	button-style(
		color: #fff,
		color-hover: #333,
		background: transparent,
		background-hover: #fff,
		border: #fff,
		border-hover: #fff
	)

.button_style_ghost.button_color_red
	button-style(
		color: #f05050,
		color-hover: #fff,
		background: transparent,
		background-hover: #f05050,
		border: #f05050,
		border-hover: #f05050
	)

// Solid
.button_style_solid.button_color_light-green
	button-style(
		color: #545454,
		color-hover: false,
		background: #dcefd6,
		background-hover: false,
		border: false,
		border-hover: false
	)

.button_style_solid.button_color_green
	button-style(
		color: #fff,
		color-hover: false,
		background: #52ae32,
		background-hover: false,
		border: false,
		border-hover: false
	)

// Transparent
.button_style_transparent.button_color_white
	button-style(
		color: #fff,
		color-hover: false,
		background: transparent,
		background-hover: false,
		border: false,
		border-hover: false
	)