ShahinSorkh/regex.html

## regex.html
<!doctype html>
<html>
  <head>
  <style>
    html { background-color: #2f3131; }

    textarea {
       display: block;
       padding: 15px;
       margin: 20px 10px;
       width: 100%;
       font-size: 14pt;
       border: 1px solid #2f7913;
    }
    span {
       margin: 5px;
       display: inline-block;
       background-color: #2f7913;
       padding: 2px
    }
  </style>
  </head>
  <body>
    <textarea id="in" oninput="match()" rows="2"></textarea>
    <textarea id="in-test" oninput="match()" rows="10"></textarea>
    <div id="res"></div>

    <script>
      function match() {
          const input = document.querySelector('#in')
          const output = document.querySelector('#res')
          const testStr = document.querySelector('#in-test').value
          output.innerHTML = ''

          const regex = new RegExp(input.value, 'gmi')
          const result = testStr.match(regex)

          for (res of result) {
              const box = document.createElement('span')
              box.innerHTML = res
              box.title = res.split('').map(c => c.charCodeAt(0)).join(' ')
              output.appendChild(box)
          }
      }
      match()
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<style>
	html { background-color: #2f3131; }

	textarea {
	display: block;
	padding: 15px;
	margin: 20px 10px;
	width: 100%;
	font-size: 14pt;
	border: 1px solid #2f7913;
	}
	span {
	margin: 5px;
	display: inline-block;
	background-color: #2f7913;
	padding: 2px
	}
	</style>
	</head>
	<body>
	<textarea id="in" oninput="match()" rows="2"></textarea>
	<textarea id="in-test" oninput="match()" rows="10"></textarea>
	<div id="res"></div>

	<script>
	function match() {
	const input = document.querySelector('#in')
	const output = document.querySelector('#res')
	const testStr = document.querySelector('#in-test').value
	output.innerHTML = ''

	const regex = new RegExp(input.value, 'gmi')
	const result = testStr.match(regex)

	for (res of result) {
	const box = document.createElement('span')
	box.innerHTML = res
	box.title = res.split('').map(c => c.charCodeAt(0)).join(' ')
	output.appendChild(box)
	}
	}
	match()
	</script>
	</body>
	</html>