我可以突出显示所选文本,将其存储在字符串中,以后再重播吗?

时间:2015-03-24 05:38:15

标签: javascript

我使用window.getSelection和designmode突出显示页面上的文本。 是否有可能以某种方式将其存储为字符串,以便我可以保存并稍后重播?

1 个答案:

答案 0 :(得分:2)

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

  

在JavaScript中,当一个对象传递给期望字符串的函数(如window.alert()document.write())时,将调用该对象的toString()方法,并将返回的值传递给功能。当它与其他函数一起使用时,当它实际上是具有属性和方法的对象时,这可以使对象看起来像是一个字符串   [...]
  但是,尝试直接在String对象上使用lengthsubstrSelection属性或方法会导致错误,如果它没有该属性或方法,如果有,可能会返回意外的结果。要将Selection对象用作字符串,请直接调用其toString()方法

var selObj, range;
document.onmouseup = function() {
  selObj = window.getSelection();
  if (selObj.isCollapsed) return;
  range = selObj.getRangeAt(0);
}

function replay() {
  selObj.removeAllRanges();
  selObj.addRange(range);
}
<button onclick="replay()">replay</button>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus commodo mauris quis est auctor faucibus. Curabitur lacus libero, sagittis a augue sed, viverra condimentum enim. Nam euismod lorem dui, vestibulum vulputate tellus euismod eget. Vestibulum
  ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce cursus dui in nisi egestas, at maximus mauris ultricies. Vivamus velit eros, imperdiet a mollis non, fringilla at nisl. Aliquam tempus interdum efficitur. Praesent id
  ex tempor, tristique mi non, blandit quam. Pellentesque non dignissim nulla, vitae finibus nunc.
</p>
<p>
  Sed commodo sagittis lacus a iaculis. Maecenas cursus tincidunt dolor, vel egestas ante euismod nec. Vestibulum lacinia mi vitae lacus aliquet, id porta metus posuere. Phasellus hendrerit vehicula ligula, sed dignissim orci accumsan sit amet. Proin at
  dictum dui. Nulla facilisi. Sed velit purus, lobortis eget turpis at, pellentesque eleifend magna. Morbi sed nunc blandit, mollis velit nec, ultrices mauris. Pellentesque augue dolor, malesuada id vulputate at, efficitur lacinia orci.
</p>
<p>
  Nullam vitae leo condimentum, finibus nulla id, lobortis magna. Nulla id tellus elementum, fermentum erat a, venenatis lectus. Vivamus congue lobortis est at feugiat. Aliquam rutrum efficitur ornare. Mauris molestie porta augue, vel semper erat aliquet
  vitae. Suspendisse id libero aliquam, lacinia felis nec, elementum ex. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc sem mi, egestas at ipsum ut, vehicula egestas lorem. Morbi
  fringilla sit amet lacus eget rhoncus. Fusce consectetur eu ex vitae rhoncus. Aenean rutrum eros sit amet hendrerit ullamcorper.
</p>
<p>
  Nam laoreet magna vehicula convallis maximus. Phasellus id purus eleifend, tincidunt nibh at, molestie mauris. Nam eget consequat velit. Duis non neque tempor, porttitor enim accumsan, gravida velit. In arcu purus, sollicitudin quis fringilla ut, blandit
  sed odio. Donec id felis metus. Vestibulum vel quam sodales, pharetra ipsum eget, tincidunt justo. Cras vitae tortor non enim iaculis gravida a sed velit. Vestibulum augue nulla, commodo quis erat quis, auctor placerat eros.
</p>
<p>
  Cras hendrerit orci nunc. Vestibulum mollis libero vitae libero rutrum viverra. Praesent et varius eros, vel accumsan ante. Nulla rhoncus, nisl a lobortis mollis, ante massa pharetra sapien, ut congue tellus ligula at turpis. Vestibulum sodales, tortor
  dictum dictum finibus, mauris orci pharetra justo, at eleifend massa metus vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc cursus urna ac lacus lacinia ultricies. Donec blandit elit eu ante
  tempor, vitae vestibulum enim sodales. Aenean bibendum purus ut venenatis tristique. Nulla convallis, ipsum ut iaculis efficitur, ipsum risus maximus nibh, eu cursus orci tortor at ligula. Curabitur et est et erat eleifend posuere vel ac nisi. In in
  lectus ligula.
</p>