javascriptのcreateRangeからコンテンツを削除する

Question

長い時間のlurkerと初めてのポスターです。 特定のdivからリッチテキストを選択してクリップボードにコピーするjavascriptコードがあります。 正常に動作しますが、削除したい余分な改行があります。

私のコードの関連部分：div要素で

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

answerText私が持っているテキストは次のとおりです。

回答テキスト

ありませんスペースや改行テキストの前後。コードの結果はmessageとなります。

この余分な改行もクリップボードにコピーされます。 選択肢から余分な改行を削除するにはどうすればよいですか？私はまた、自分の範囲から削除しているコンテンツが実際にそれを安全に使うための改行であることを確認することを好む。

Answer 1

selectNode（）の代わりにselectNodeContents（）に切り替えるようにしてください。そうそうです。range.selectNodeContents（textToSelect [0]）;.

カラーブロックをクリックしたときに16進数の色をコピーするスクリプトを作成しようとして同じ問題が発生しました。ここで

は（内容を削除し、あなたが余分な行が表示されます - 少なくとも、クロムで）一緒にプレイする抜粋です：

$(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を加えたものに等しくなります（ノードが1つしか選択されないため）。

selectNodeContents（）を使用すると、startContainer、endContainer、およびcommonAncestorContainerは、渡されたノードと等しくなります。 startOffsetは0に等しい。 endOffsetは子ノードの数（node.childNodes.length）に等しい。

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