how to avoid extra spacing in html code while copying html code by a button

Blackranger 0
Viewed 34

i created a copy button by which you can copy HTML code of a div but problem is that when it coppy inner HTML it also copy spacing of that main HTML I want to copy that code and remove extra spacing

function copyToClipboard(text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

function copyEvent() {
  var elem = document.getElementById("copy").innerHTML;
  copyToClipboard(elem)
}
<button type="button" class="btn btn-dark"   onclick="copyEvent();"><iconify-icon icon="akar-icons:copy"></iconify-icon>Copy code</button></p>
<div id="copy">
 <div class="s-popover ws2 mtn2 p0"
                    id="products-popover"
                    role="menu"
                    aria-hidden="true">
                <div class="s-popover--arrow"></div>
                <ol class="list-reset s-anchors s-anchors__inherit">
                    <li class="m6">
                        <a href="/" class="bar-sm p6 d-block h:bg-black-100 js-gps-track"
                            data-gps-track="top_nav.products.click({location:2, destination:2})"
                            data-ga="[&quot;top navigation&quot;,&quot;public qa submenu click&quot;,null,null,null]">
                            <span class="fs-body1 d-block">Stack Overflow</span>
                            <span class="fs-caption d-block fc-light">Public questions &amp; answers</span>
                        </a>
                    </li>
                    <li class="m6">
                        <a href="/teams" class="bar-sm p6 d-block h:bg-black-100 js-gps-track"
                            data-gps-track="top_nav.products.click({location:2, destination:3})"
                            data-ga="[&quot;top navigation&quot;,&quot;teams submenu click&quot;,null,null,null]">
                            <span class="fs-body1 d-block">Stack Overflow for Teams</span>
                            <span class="fs-caption d-block fc-light">Where developers &amp; technologists share private knowledge with coworkers</span>
                        </a>
                    </li>
                    <li class="m6">
                        <a href="https://stackoverflow.co/talent" class="bar-sm p6 d-block h:bg-black-100 js-gps-track"
                            data-gps-track="top_nav.products.click({location:2, destination:5})"
                            data-ga="[&quot;top navigation&quot;,&quot;talent submenu click&quot;,null,null,null]">
                            <span class="fs-body1 d-block">Talent</span>
                            <span class="fs-caption d-block fc-light">
                                Build your employer brand
                            </span>
                        </a>
                    </li>
                </ol>
            </div>
            
</div>

it copy the code with all the spacing and all but I want to avoid that even new line is there any way by which I can avoid that any idea and suggestion will be helpful there Is way by writing like that but i am retrieve some information from database so i have to use django template tag which is not being copied and it create extra spacing

django-templates javascript css html
2 Answers

You can remove whitespace and new lines using regular expressions. This solution involves the usage of four regular expressions:

// remove newline / carriage return
str.replace(/\n/g, "");

// remove whitespace (space and tabs) before tags
str.replace(/[\t ]+\</g, "<");

// remove whitespace between tags
str.replace(/\>[\t ]+\</g, "><");

// remove whitespace after tags
str.replace(/\>[\t ]+/g, ">");

You can use in your code like this:

function copyEvent() {
  var elem = document.getElementById("copy").innerHTML;
  
  elem = elem.replace(/\n/g, "")
    .replace(/[\t ]+\</g, "<")
    .replace(/\>[\t ]+\</g, "><")
    .replace(/\>[\t ]+/g, ">");
  
  copyToClipboard(elem);
}

JS Fiddle: https://jsfiddle.net/y6nde0gc/1/

I found this solution in this website: https://jaketrent.com/post/remove-whitespace-html-javascript

Had to make a small change to the 4th regex to make it work (removed $ character).

Dimitris Maragkos0
  1. It's not a copy issue. The code is added to the textarea with the space.
  2. The space exists in your HTML, because you don't have everything in one line
  3. Consider using .trim()

function copyToClipboard(text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text.trim();
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

function copyEvent() {
  var elem = document.getElementById("copy").innerHTML;
  copyToClipboard(elem)
}
<button type="button" class="btn btn-dark"   onclick="copyEvent();"><iconify-icon icon="akar-icons:copy"></iconify-icon>Copy code</button></p>
<div id="copy">
 <div class="s-popover ws2 mtn2 p0"
                    id="products-popover"
                    role="menu"
                    aria-hidden="true">
                <div class="s-popover--arrow"></div>
                <ol class="list-reset s-anchors s-anchors__inherit">
                    <li class="m6">
                        <a href="/" class="bar-sm p6 d-block h:bg-black-100 js-gps-track"
                            data-gps-track="top_nav.products.click({location:2, destination:2})"
                            data-ga="[&quot;top navigation&quot;,&quot;public qa submenu click&quot;,null,null,null]">
                            <span class="fs-body1 d-block">Stack Overflow</span>
                            <span class="fs-caption d-block fc-light">Public questions &amp; answers</span>
                        </a>
                    </li>
                    <li class="m6">
                        <a href="/teams" class="bar-sm p6 d-block h:bg-black-100 js-gps-track"
                            data-gps-track="top_nav.products.click({location:2, destination:3})"
                            data-ga="[&quot;top navigation&quot;,&quot;teams submenu click&quot;,null,null,null]">
                            <span class="fs-body1 d-block">Stack Overflow for Teams</span>
                            <span class="fs-caption d-block fc-light">Where developers &amp; technologists share private knowledge with coworkers</span>
                        </a>
                    </li>
                    <li class="m6">
                        <a href="https://stackoverflow.co/talent" class="bar-sm p6 d-block h:bg-black-100 js-gps-track"
                            data-gps-track="top_nav.products.click({location:2, destination:5})"
                            data-ga="[&quot;top navigation&quot;,&quot;talent submenu click&quot;,null,null,null]">
                            <span class="fs-body1 d-block">Talent</span>
                            <span class="fs-caption d-block fc-light">
                                Build your employer brand
                            </span>
                        </a>
                    </li>
                </ol>
            </div>
            
</div>

Konrad Linkowski0
Related