Skip to content

Instantly share code, notes, and snippets.

@sardinecan
Created November 6, 2023 14:56
Show Gist options
  • Save sardinecan/d756d74facac9c9f98e59d27103b74a1 to your computer and use it in GitHub Desktop.
Save sardinecan/d756d74facac9c9f98e59d27103b74a1 to your computer and use it in GitHub Desktop.
XPointer
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>XPointer test</title>
<style>
span{
color: orangered;
}
</style>
</head>
<body>
<div id="transcription">
<h1>Sélectionnez une portion de texte pour obtenir sa position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cumque dignissimos dolore et, facilis iure iusto laborum neque, officiis quas quis velit? Dolor iure libero non optio repudiandae. Error, nulla.</p>
<!-- ne fonctionne pas avec le contenu mixte… -->
<p>Lorem ipsum dolor sit amet, <span>consectetur</span> adipisicing elit. <span>Asperiores</span> cumque dignissimos dolore et, facilis iure iusto laborum neque, officiis quas quis velit? Dolor iure libero non optio repudiandae. Error, nulla.</p>
</div>
<script type="text/javascript">
document.getElementById('transcription').addEventListener('mouseup', function(e) {
var selection = window.getSelection();
var start = selection.anchorOffset;
var end = selection.focusOffset;
if (start >= 0 && end >= 0){
alert('début : ' + start + ' ; fin : ' + end);
console.log("début: " + start);
console.log("fin: " + end);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment