Program to retrieve the text contents of the user selection using JavaScript.

JavascriptWeb DevelopmentObject Oriented Programming

Following is the code to retrieve the text contents of the user selection using JavaScript −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result,.sample {
      font-size: 20px;
      font-weight: 500;
      color: rebeccapurple;
   }
</style>
</head>
<body>
<h1>Retrieve the text contents of the user selection</h1>
<div style="color: green;" class="result">
Here is some text inside the div
</div>
<div class="sample"></div>
<button class="Btn">SELECT</button>
<h3>Click on the above button to display the text selected by the user</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   let sampleEle = document.querySelector(".sample");
   BtnEle.addEventListener("click", () => {
      sampleEle.innerHTML = window.getSelection().toString();
   });
</script>
</body>
</html>

Output

The above code will produce the following output −

On selecting some text and then clicking the ‘SELECT’ button −

raja
Published on 18-Jul-2020 07:07:54
Advertisements