JSFiddle - React, Tailwind, and code Playground

by Yaroslav Samardak

HTML

<div id="form"></div>

<div>
	В <a href="#">любом филиале</a>, для&nbsp;
	<a href="#">рабочего места "Касса"</a>,&nbsp;
  <a href="#">любого оператора</a> и&nbsp;
	<a href="#">любой задачи</a>,&nbsp;
	<a href="#">вместо</a>&nbsp;
	<a href="#">завершения обслуживания</a>
	<a href="#">перенаправлять</a> к&nbsp;
	<a href="#">задаче</a>&nbsp;
	<a href="#">"Лаборатория"</a>
</div>

<div>
	В <a href="#">филиале "Гагарина 1, Чиланзар, Ташкент"</a>, для&nbsp;
	<a href="#">любого рабочего места</a>,&nbsp;
  <a href="#">любого оператора</a> и&nbsp;
	<a href="#">задачи "Информация"</a>,&nbsp;
	<a href="#">после</a>&nbsp;
	<a href="#">начала обслуживания</a>
	<a href="#">показать диалог изменения задачи</a>
</div>

CSS

body {
	background: #39353E;
	color: #FFFFFF;
	font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	padding: 8px;
	font-size: 130%;
}

select {
	width: auto;
}

a, a:focus, a:visited {
	text-decoration: none;
	color: rgba(255, 255, 255, 0.7);
	border-bottom: 1px dashed rgba(255, 255, 255, 0.3)
}

a:hover {
	color: #FFF;
}

div {
	margin-bottom: 8px;
}

JavaScript

const formScheme = {
	pattern: 'В $filial_id, для $workspace_id, $operator_id и $task_id, $action $event $feature',
	action: {
		render: (value) => {
			if (!value) return 'ничего не делать для'
			if (value === 'instead') return 'вместо'
			return 'после'
		},
		values: ['instead', 'after']
	},
	filial_id: {
		render: (value) => !value ? 'любом филиале' : `филиале "${value}"`,
		values: ['f1', 'f2']
	},
	workspace_id: {
		render: (value) => !value ? 'любого рабочего места' : `рабочего места "${value}"`,
		values: ['w1', 'w2']
	},
	operator_id: {
		render: (value) => !value ? 'любого оператора' : `оператора "${value}"`,
		values: ['o1', 'o2']
	},
	task_id: {
		render: (value) => !value ? 'любой задачи' : `задачи "${value}"`,
		values: ['t1', 't2']
	},
	event: {
		render: (value) => {
			if (!value) return 'любого действия'
			return value
		},
		values: ['a1', 'a2']
	},
	feature: {
		render: (value) => {
			if (!value) return ''
			return value
		},
		values: ['f1', 'f2']
	}
}

const data = {
	
}

function makeSelect(value, item) {
	return `<select value="${value}">
		<option value="undefined">${(item.renderItem || item.render)()}</option>
	${
		item.values.map((val) => `<option value=${val}>${(item.renderItem || item.render)(val)}</option>`)
	}</select>`
}

const form = document.getElementById('form')
form.innerHTML = formScheme.pattern.replace(/\$([^\s \,]+)/g, (_, key) => {
	return makeSelect(data[key], formScheme[key])
})

console.log(formScheme.pattern.split(/(\$[^\s \,]+)/g))