javascript - 从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 text

文本前后没有任何空格或换行符。代码结果如下 message .

然后这个额外的换行符也被复制到剪贴板。如何从选择中删除额外的换行符？我还更喜欢检查我从我的范围中删除的内容是否确实是一个换行符以确保使用安全。

Answer 1

尝试切换到 selectNodeContents() 而不是 selectNode() - 所以 range.selectNodeContents(textToSelect[0]);.

我遇到了同样的问题，试图在点击色 block 时编写一些脚本来复制十六进制颜色。

这里是可以玩的片段(删除内容，你会看到额外的行 - 至少在 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