Removing content from createRange in javascript

Question

Long time lurker and first time poster here. I have a javascript code that selects and copies rich text to the clipboard from a specific div. It works well but there is an extra line break that I want to eliminate.

The relevant part of my code:

var textToSelect = document.getElementById('answerText');
range = document.createRange();
range.selectNode(textToSelect[0]);
window.getSelection().addRange(range);
document.execCommand("copy");
alert(range);

In div answerText the text I have is:

answer text

There aren't any spaces or line breaks before/after the text. The code results in the following message .

This extra line break is then also copied to the clipboard. How can I remove the extra line break from the selection? I also prefer to check that the content I'm removing from my range is indeed a line break to make it safe to use.

Answer 1

Try to switch over to selectNodeContents() instead of selectNode() - so range.selectNodeContents(textToSelect[0]);.

I ran into the same problem trying to whip up some script to copy hex colors when the color block was clicked.

Here is the snippet to play with (remove contents and you'll see the extra line - at least in chrome):

 $(function() { //copys inner html of target div. //event button var copyBtn = $('.copy-btn'); copyBtn.on('click', function(event) { var $this = $(this); //find the element that has the text you want. var content = $this.prev('.meta--value'); //creates new range object and sets text as boundaries. var range = document.createRange(); range.selectNodeContents(content[0]); window.getSelection().addRange(range); try { // Now that we've selected the text, execute the copy command var successful = document.execCommand('copy'); /*var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy email command was ' + msg);*/ //handle success $(this).after('<span class="success"></span>'); setTimeout(function() { $('.success').addClass('show'); setTimeout(function() { $('.success').fadeOut(function() { $('.success').remove(); }); }, 1000); }, 0); } catch (err) { //console.log('Oops, unable to copy'); } //clear out range for next event. window.getSelection().removeAllRanges(); }); }); 

 @import url(https://fonts.googleapis.com/css?family=Roboto:300,900|Merriweather); * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background-color: #efefef; color: #131313; } p { font-weight: 600; font-size: 20px; margin-top: 1.5vw; } .swatch-wrapper { width: 90vw; margin: 0 auto; } @media (max-width: 320px) { .swatch-wrapper { width: 100%; margin: 0; } } .swatch-wrapper .swatch { display: inline-block; vertical-align: top; margin: 0 3px 10px 0; width: 22.5vw; max-width: 200px; background-color: #e2e2e2; box-shadow: 0 1px 0 0 rgba(19, 19, 19, 0.1); -webkit-transition: box-shadow 150ms, -webkit-transform 150ms; transition: box-shadow 150ms, -webkit-transform 150ms; transition: transform 150ms, box-shadow 150ms; transition: transform 150ms, box-shadow 150ms, -webkit-transform 150ms; } @media (max-width: 320px) { .swatch-wrapper .swatch { display: block; width: 90%; margin: 0 auto 1.5vh; max-width: none; } } .swatch-wrapper .swatch:hover { -webkit-transform: scale(1.02); transform: scale(1.02); box-shadow: 0px 3px 10px -5px rgba(19, 19, 19, 0.3); } .swatch-wrapper .swatch--color { margin: 0; padding: 0; width: 100%; height: 5vw; max-height: 133px; } .swatch-wrapper .swatch--meta { padding: 0.375vw; font-family: monospace; } @media (max-width: 320px) { .swatch-wrapper .swatch--meta { padding: .75vh .75vh 1vh; } } .swatch-wrapper .meta + .meta { margin-top: 0.375vw; } .swatch-wrapper .meta:before { color: #939393; } .swatch-wrapper .meta--name:before { content: "name: "; } .swatch-wrapper .meta--aliases:before { content: 'aliases: '; } .swatch-wrapper .meta--value:before { content: 'value: '; } /** functional classes / none display stuff */ .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; } .swatch { position: relative; -webkit-transition: all .1s ease; transition: all .1s ease; } .swatch:hover { background-color: #EFEFEF; } .swatch:hover:after { bottom: 0; } .swatch:hover .copy-btn { opacity: .5; right: 0; } .copy-btn { position: absolute; opacity: 0; cursor: pointer; top: 0; text-align: center; -webkit-transition: all .2s ease; transition: all .2s ease; right: -100%; bottom: 0; padding: 15px; background-color: #636363; color: #fff; text-transform: uppercase; font-size: 10px; font-weight: 600; border: none; outline: none; width: 100%; } .copy-btn:before { content: ""; width: 10px; height: 100%; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position-y: center; } .copy-btn:after { content: "click to copy"; display: inline-block; vertical-align: middle; } .success { position: absolute; right: 0; cursor: pointer; width: 100%; top: 0; font-size: 12px; text-align: center; font-style: normal; font-weight: 600; bottom: 0; padding: 15px; background-color: #000; color: #fff; text-transform: uppercase; -webkit-transition: all .1s ease; transition: all .1s ease; font-weight: 600; -webkit-transform: scale(0.1); transform: scale(0.1); border-radius: 100%; } .success:before { content: ""; width: 10px; height: 100%; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position-y: center; } .success:after { content: "Copied!"; display: inline-block; vertical-align: middle; } .success.show { -webkit-transform: scale(1); transform: scale(1); border-radius: 0; } .p-success:hover { border: 2px solid #E93937; } .p-success:before { content: "Copied"; background: #E93937; width: 92px; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <br> <article class="swatch-wrapper cf"> <footnote>Hover and Click to Copy Hex</footnote> <br> <section class="swatch"> <figure class="swatch--color" style="background-color:#fff;"></figure> <figcaption class="swatch--meta"> <div class="meta meta--name">Millennium</div> <div class="meta meta--value">#ffffff</div> <button class="copy-btn"></button> </figcaption> </section> </article> 

When you use selectNode(), the startContainer, endContainer, and commonAncestorContainer are all equal to the parent node of the node that was passed in; startOffset is equal to the index of the given node within the parent's childNodes collection, whereas endOffset is equal to the startOffset plus one (because only one node is selected).

When you use selectNodeContents(), startContainer, endContainer, and commonAncestorContainer are equal to the node that was passed in; startOffset is equal to 0; endOffset is equal to the number of child nodes (node.childNodes.length).

From: http://www.wrox.com/WileyCDA/Section/JavaScript-DOM-Ranges.id-292301.html