JSFiddle - React, Tailwind, and code Playground

by Jay Lim

HTML

<div class="wrapper">
  <div class="card">
    <div class="title">
      <img src="https://material.google.com/static/images/callout_default.svg" alt="느낌표" width="20px" height="20px">
    </div>
    <div class="content">
      <p id="targetStr">&amp;<span>(앰퍼샌드)</span>만 찾아 바꿔라</p>
    </div>
  </div>
  <p>10bird&amp;김경민&amp;&amp;김경민은 도망가고 싶다&amp;&amp;&amp;amp;</p>
  <button type="button" onclick="showChange()">실행</button>
</div>

CSS

html > *, body > * {padding: 0; margin: 0; font-size: 12px; color: #555;}
button {padding: 6px 8px; margin: 10px; border: none; border-radius: 4px; background: none; background: #0095dd; color: white;}
.wrapper {width: 90%; height: 180px; background: #fafafa; border: 1px #eee solid; margin: 20px auto;}
.card {width: 250px; height: 70px; border: 1px #eee solid; margin: 10px}
.title {width: 20px; height: 45px; padding: 25px 15px 0 15px; background: #ededed; color: white; float: left;}
.title img {opacity: .25;}
.content {width: 200px; height: 70px; background: white; float: left;}
.content p {margin: 27px 0 0 0; text-align: center; font-size: 13px; font-weight: bolder;}
.content p span {color: grey; font-weight: lighter;}
.wrapper>p {margin-left: 10px;}

JavaScript

'use strict';
var str = '10bird&김경민&&김경민은 도망가고 싶다&&&amp;';
var regStr1 = /&[^&&]/gm;
var frstChange = str.replace(regStr1, '&amp;');
var regStr2 = /&&amp;/;
var scndChange = frstChange.replace(regStr2, '&&');
var regStr3 = /&amp;mp;/;
var thrdChange = scndChange.replace(regStr3, '&amp;');
function showChange(){
  alert(thrdChange);
}