- [Select highlight and unselect text • REPL • Svelte](https://svelte.dev/repl/0850d3391abe41b881d8da74205612f3?version=4.2.18)
```javascript
<script lang="ts">
let highlightedStrings = [];
let selections = [];
let selectedString = '';
let content = 'This is an example sentence. Try selecting different parts of this text.';
const handleClick = (e) => {
console.log('clicked/removed from highlightedStrings', e);
e.target.style.backgroundColor = 'transparent';
highlightedStrings = highlightedStrings.filter((str) => str !== e.target.innerText);
console.log(highlightedStrings);
};
const handleMouseUp = () => {
let selection = document.getSelection();
selectedString = selection.toString();
if (selection && selectedString.length > 0) {
const range = selection.getRangeAt(0);
const highlightNode = document.createElement('mark');
highlightNode.onclick = handleClick;
highlightNode.appendChild(document.createTextNode(selectedString));
range.deleteContents();
range.insertNode(highlightNode);
selections = [...selections, highlightNode];
highlightedStrings = [...highlightedStrings, selectedString];
selection.removeAllRanges();
console.log(highlightedStrings);
}
};
</script>
<svelte:window on:mouseup={handleMouseUp} />
<div>
<p contenteditable="true">{@html content}</p>
<p>Selection: {selectedString}</p>
</div>
```