<div class="wrapper">
  <p class="text">Highlight something in this sentence, then click the button.</p>
  
  <button id="button">Get highlighted text</button>
  
  <p class="text">You highlighted: <span id="highlighted"></span></p>
</div>
.wrapper {
  border: 3px solid #121212;
  padding: 20px;
}

.text {
  font-family: "Arial";
  font-size: 1.4rem;
  margin-bottom: 30px;
}

#button {
  background-color: rgb(255, 65, 99);
  border: 2px solid #121212;
  cursor: pointer;
  padding: 10px 15px;
  margin-bottom: 10px;
}
const selection = () => {
  if (window.getSelection)
     return window.getSelection();
}

const getSelectedText = () => {     document.getElementById("highlighted").innerText = selection();
}

document.getElementById("button").addEventListener("click", getSelectedText);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.