Props to object syntax

by Matt

HTML

<div class="textareas">
  <textarea id="input"></textarea>
  <textarea id="output" readonly></textarea>
</div>

<button id="button">
Convert
</button>

CSS

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  padding: 1rem;
}

body {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.5rem;
}

.textareas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

JavaScript

function propsToObject(str) {
	return str
		.replace(/=\{\{(.*?)\}\}/sg,": {$1},")
		.replace(/=\{(.*?)\}/sg,": $1,")
		.replace(/="(.*?)"/sg,": \"$1\",")
}


button.onclick = () => {
	output.value = propsToObject(input.value)
}

output.onclick = () => output.select()