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中，我的文字是：

回答文字

文本之前/之后没有任何空格或换行符。代码会生成以下message。

此额外换行符也会复制到剪贴板。如何从选择中删除额外的换行符？我还希望检查我从我的范围中删除的内容确实是换行符，以便安全使用。

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

在javascript中从createRange中删除内容

1 个答案: