wolftrax5/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <textarea name="text" id="text" cols="30" rows="10"></textarea>
  <button id="button">Convert</button>
  <div id="result" style="display:block; width: 300px;height:100px; background: white;">

  </div>


<script id="jsbin-javascript">
const regexAliases = /@(.+?[a-z0-9_.\-+]+)/gi;


let textInput = document.getElementById('text');
let result = document.getElementById('result');

const aliases = {
  raul: {
    name: 'Raul Lucero'
  },
  alejandro: {
    name: 'Alejandro Medina'
  }
}

const button = document.getElementById('button');

button.addEventListener('click', (e) => {
  console.log(textInput.value);

  const text = textInput.value.replace(regexAliases, function (str, p1, _index, offset, s) {
    if (!!aliases[p1]) {
      return '<b>' + aliases[p1].name + '</b>';
    }

    return str;
  });

  result.innerHTML = text;
});
</script>


<script id="jsbin-source-javascript" type="text/javascript">const regexAliases = /@(.+?[a-z0-9_.\-+]+)/gi;


let textInput = document.getElementById('text');
let result = document.getElementById('result');

const aliases = {
  raul: {
    name: 'Raul Lucero'
  },
  alejandro: {
    name: 'Alejandro Medina'
  }
}

const button = document.getElementById('button');

button.addEventListener('click', (e) => {
  console.log(textInput.value);

  const text = textInput.value.replace(regexAliases, function (str, p1, _index, offset, s) {
    if (!!aliases[p1]) {
      return '<b>' + aliases[p1].name + '</b>';
    }

    return str;
  });

  result.innerHTML = text;
});</script></body>
</html>

## jsbin.rositi.js
const regexAliases = /@(.+?[a-z0-9_.\-+]+)/gi;


let textInput = document.getElementById('text');
let result = document.getElementById('result');

const aliases = {
  raul: {
    name: 'Raul Lucero'
  },
  alejandro: {
    name: 'Alejandro Medina'
  }
}

const button = document.getElementById('button');

button.addEventListener('click', (e) => {
  console.log(textInput.value);

  const text = textInput.value.replace(regexAliases, function (str, p1, _index, offset, s) {
    if (!!aliases[p1]) {
      return '<b>' + aliases[p1].name + '</b>';
    }

    return str;
  });

  result.innerHTML = text;
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<textarea name="text" id="text" cols="30" rows="10"></textarea>
	<button id="button">Convert</button>
	<div id="result" style="display:block; width: 300px;height:100px; background: white;">

	</div>


	<script id="jsbin-javascript">
	const regexAliases = /@(.+?[a-z0-9_.\-+]+)/gi;


	let textInput = document.getElementById('text');
	let result = document.getElementById('result');

	const aliases = {
	raul: {
	name: 'Raul Lucero'
	},
	alejandro: {
	name: 'Alejandro Medina'
	}
	}

	const button = document.getElementById('button');

	button.addEventListener('click', (e) => {
	console.log(textInput.value);

	const text = textInput.value.replace(regexAliases, function (str, p1, _index, offset, s) {
	if (!!aliases[p1]) {
	return '<b>' + aliases[p1].name + '</b>';
	}

	return str;
	});

	result.innerHTML = text;
	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">const regexAliases = /@(.+?[a-z0-9_.\-+]+)/gi;


	let textInput = document.getElementById('text');
	let result = document.getElementById('result');

	const aliases = {
	raul: {
	name: 'Raul Lucero'
	},
	alejandro: {
	name: 'Alejandro Medina'
	}
	}

	const button = document.getElementById('button');

	button.addEventListener('click', (e) => {
	console.log(textInput.value);

	const text = textInput.value.replace(regexAliases, function (str, p1, _index, offset, s) {
	if (!!aliases[p1]) {
	return '<b>' + aliases[p1].name + '</b>';
	}

	return str;
	});

	result.innerHTML = text;
	});</script></body>
	</html>