Match setting generator #TWA

index.pug

div#matchinput(contenteditable="true")
	span.symbol \
	span.static example
	span.symbol \
	span.part example-1
	span.symbol \
	span.part.group crate
	span.symbol \
	span.part.group book
	span.symbol \
	span.part.group file
div#output example\\example-1\\(?<crate>.*?)\\(?<book>.*)\\(?<file>.*)$

playground.json

{
  "scripts": [
    "jquery"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}

script.js

$(document).on("click", ".part", function(){
	$(this).toggleClass("group")
})

$('body').on('focus', '[contenteditable]', function() {
	const $this = $(this);
	$this.data('before', $this.html());
}).on('blur keyup paste input', '[contenteditable]', function() {
	const $this = $(this);
	if ($this.data('before') !== $this.html()) {
			$this.data('before', $this.html());
			$this.trigger('change');
	}
});

$(document).on("change click", "#matchinput", function(){
	[...$(".part")].forEach(element => {
		if($(element).text() == "*")
			$(element).removeClass("group").addClass("any")
		else
			$(element).removeClass("any")
	});
	$("#output").text([...$("#matchinput").children()].map(x => $(x).hasClass("group") ? $(x).text() == "*" ? `.*?` : `(?<${$(x).text()}>.*?)`: ($(x).hasClass("static") || $(x).hasClass("part")?$(x).text() == "*" ? `.*?` : $(x).text():`\\\\`)).join('')+"$")
})

style.scss

:root {
	--accent:#5D9CEC;
	--main-background:#1F2125;
	--sidebar-background:#32363A;
	--sidebar-color:white;
	--sidebar-title-color:rgb(203, 207, 212);
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	background:var(--main-background);
	font-family: "Cera Pro", "Segoe UI", sans-serif;
	#matchinput {
		min-width:30rem;
		//height:3rem;
		padding:1rem;
		border-radius: .5rem;
		background:#343538;
		color:white;
		span {
			&.symbol {
				color:#7DB1B1;
				padding:.25rem .125rem;
				&.implied {
					opacity:.5;
				}
			}
			&.static {
				padding:.25rem 0rem;
				border-radius: .5rem;
			}
			&.part {
				background:rgba(0,0,0,.25);
				cursor: pointer;
				padding:.25rem .5rem;
				border-radius: .5rem;
				&:hover {
					background:rgba(0,0,0,.5);
				}
			}
			&.group {
				background:#5D9CEC;
				padding:.25rem .5rem;
				border-radius: .5rem;
				cursor: pointer;
				&:hover {
					background:#4A89DC;
				}
			}
			&.any {
				background:rgb(94, 138, 138);
				padding:.25rem .5rem;
				border-radius: .5rem;
				cursor: text;
				&:hover {
					background:rgb(80, 119, 119);
				}
			}
			&:first {
				padding-left: 0;
			}
		}
	}
	#output {
		position: fixed;
		bottom:.5rem;
		left:.5rem;
		right:.5rem;
		padding:1rem;
		border-radius: .5rem;
		min-height: 1.1rem;
		background:#343538;
		color:white;
		font-family: "Fira Code", monospace;
	}
}