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"    onclick="copyEvent();"><iconify-icon icon="akar-icons:copy"></iconify-icon>Copy code</button></p>
<div id="copy">
 <div 
                    id="products-popover"
                    role="menu"
                    aria-hidden="true">
                <div ></div>
                <ol >
                    <li >
                        <a href="/" 
                            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 >Stack Overflow</span>
                            <span >Public questions &amp; answers</span>
                        </a>
                    </li>
                    <li >
                        <a href="/teams" 
                            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 >Stack Overflow for Teams</span>
                            <span >Where developers &amp; technologists share private knowledge with coworkers</span>
                        </a>
                    </li>
                    <li >
                        <a href="https://stackoverflow.co/talent" 
                            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 >Talent</span>
                            <span >
                                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

CodePudding user response：

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).

CodePudding user response：

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"    onclick="copyEvent();"><iconify-icon icon="akar-icons:copy"></iconify-icon>Copy code</button></p>
<div id="copy">
 <div 
                    id="products-popover"
                    role="menu"
                    aria-hidden="true">
                <div ></div>
                <ol >
                    <li >
                        <a href="/" 
                            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 >Stack Overflow</span>
                            <span >Public questions &amp; answers</span>
                        </a>
                    </li>
                    <li >
                        <a href="/teams" 
                            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 >Stack Overflow for Teams</span>
                            <span >Where developers &amp; technologists share private knowledge with coworkers</span>
                        </a>
                    </li>
                    <li >
                        <a href="https://stackoverflow.co/talent" 
                            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 >Talent</span>
                            <span >
                                Build your employer brand
                            </span>
                        </a>
                    </li>
                </ol>
            </div>
            
</div>