從JavaScript中的createRange中刪除內容

Question

長期潛伏在這里和第一次海報。 我有一個JavaScript代碼，可以從特定div選擇富文本並將其復制到剪貼板。 它運作良好，但我想消除額外的換行符。

我的代碼的相關部分：

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

在div answerText中，我的文字是：

回答文字

文本之前/之后沒有空格或換行符。 該代碼將導致以下消息 。

然后，該額外的換行符也將復制到剪貼板。 如何從選擇中刪除多余的換行符？ 我還希望檢查從范圍中刪除的內容確實是換行符，以確保使用安全。

Answer 1

嘗試切換到selectNodeContents（）而不是selectNode（）-所以range.selectNodeContents（textToSelect [0]）;。

我遇到了同樣的問題，試圖在單擊色塊時啟動一些腳本以復制十六進制顏色。

這是要播放的代碼段（刪除內容，您會看到多余的行-至少在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> 

當您使用selectNode（）時，startContainer，endContainer和commonAncestorContainer都等於傳入的節點的父節點。 startOffset等於父節點的childNodes集合中給定節點的索引，而endOffset等於startOffset加上1（因為僅選擇了一個節點）。

當使用selectNodeContents（）時，startContainer，endContainer和commonAncestorContainer等於傳入的節點。 startOffset等於0; endOffset等於子節點的數目（node.childNodes.length）。

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