<div id="container">
  <div>
    <label for="original">Original</label>
    <textarea cols="50" rows="20" id="original" onkeyup="strip()">
  <div>
    <p>Hey that's <span><b>something</span></b></p>
  </div>    
  
  <p>paragraph</p>
  
  <h1>Big title</h1>
  <script>alert("i'm a hacker 🧐");</script>
</textarea>
  </div>
  <div>
    <button type="button" onclick="strip()">Strip it</button>
  </div>

  <div>
    <label for="stripped">Stripped code</label>
    <textarea cols="50" rows="20" id="stripped" disabled></textarea>

  </div>
</div>
body {
  text-align: center;
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

#container {
  display: flex;
  align-items: center;
  flex-flow: column;
}
@media (min-width: 900px) {
  #container {
    flex-flow: row;
  }
}

label {
  vertical-align: top;
  display: block;
}

button {
  font-size: 1.5rem;
  margin: 0.5rem;
}
View Compiled
function strip(html) {
  const fakeDiv = document.createElement("div");
  fakeDiv.innerHTML = document.getElementById("original").value;
  document.getElementById("stripped").innerHTML =
    fakeDiv.textContent || fakeDiv.innerText || "";
}

strip();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.