Copying Data with JavaScript
Tags: javascript, programming
Published: 2018-09-22 19:19:21

---
title: Copying Data with JavaScript
published: true
description: Copying Data with JavaScript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/76cxxaxerwl364edwc4n.jpg
tags: javascript, programming
---

[This post was first posted on my blog](https://medium.com/ali-g%C3%B6ren/copy-something-with-javascript-b8604f51aad3)

Hi everyone. In this article, I’ll tell you how to copy something with the JavaScript.

Before starting, I need to say that, there is an npm package that built with the information in this article.

You can install it to test

[https://www.npmjs.com/package/copy-simple](https://www.npmjs.com/package/copy-simple)

```bash
npm i copy-simple
```

Also there is a GitHub repository on [this](https://github.com/aligoren/copy-simple) link.

I will create an empty function called **copy**. We will use this function to copy values, element text, HTML or selected texts.

```javascript
function copy(el) {
   // We will create different functions
}
```
The **el** argument will use to handle element by the [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) method. Which means, our method will be changed.

```javascript
function copy(el) {
  var e = document.querySelector(el);
  
  function saveClipBoard(data) {
  
  }
  
  function val() {
  
  }
  
  function text() {
  
  }
  
  function html() {
  
  }
  
  function url() {
  
  }
  
  function selected() {
  
  }
  
  return {
    val: val,
    text: text,
    html: html,
    url: url,
    selected: selected
  }
}
```

There are new methods which contain nothing. But our method will look like that. As you see, our method will return an object that contains methods.

## Creating Temporary HTML Element To Copy

In order to copy something, we need to create an input element. Probably there are different ways to do that. But after copy the value, we will remove this element. In order to do this, we will use the **saveClipBoard** method.

## Creating the saveClipBoard Method

Our method will be like this;

```javascript
function saveClipBoard(data) {
  var dummy = document.createElement('input');
  var text = data;

  document.body.appendChild(dummy);
  dummy.value = text;
  dummy.select();
  var success = document.execCommand('copy');
  document.body.removeChild(dummy);

  return success;
}
```

In this method, we assigned the data argument’s value to the dummy element’s value. After that, we used the [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) method. This method will return a boolean value. After this method, we will remove the dummy element. You can even try if it like this.

## Getting Values

The other methods will be like this

```javascript
function val() {
  var v = e.value
  return saveClipBoard(v)
}

function text() {
  var t = e.innerText

  return saveClipBoard(t)
}

function html() {
  var h = e.outerHTML

  return saveClipBoard(h)
}

function url() {
  var u = window.location.href

  return saveClipBoard(u)
}

function selected() {
  var s = window.getSelection().toString()

  return saveClipBoard(s)
}
```

These methods can understand easily. Every method calls the **saveClipBoard** method. There is a different method called [getSelection](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection), you may don’t know it. Mozilla says that;

> Returns a Selection object representing the range of text selected by the user or the current position of the caret.

That’s all. Our method completed.

```javascript
function copy(el) {
  var e = document.querySelector(el);

  function saveClipBoard(data) {
    var dummy = document.createElement('input');
    var text = data;

    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    var success = document.execCommand('copy');
    document.body.removeChild(dummy);

    return success;
  }
  
  function val() {
    var v = e.value
    
    return saveClipBoard(v)
  }

  function text() {
    var t = e.innerText

    return saveClipBoard(t)
  }

  function html() {
    var h = e.outerHTML

    return saveClipBoard(h)
  }

  function url() {
    var u = window.location.href

    return saveClipBoard(u)
  }

  function selected() {
    var s = window.getSelection().toString()

    return saveClipBoard(s)
  }

  return {
    val: val,
    text: text,
    html: html,
    url: url,
    selected: selected
  }
}
```

## Let’s test it

I’ve created a pen on the CodePen for you. In order to test our method, you need to click on the button.

{% codepen https://codepen.io/aligoren/pen/oPOYmR %}

You can use the other methods which in the comment blocks.

I hope this article will help you.

Thanks for reading.