Скачать или смотреть Get selection offsets in JS/HTML with formatting information

Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram:   / ky.emrah  

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!Get selection offsets in JS/HTML with formatting information

I am building a web interface for annotating texts.
The user should select a portion of the text (using the mouse) and write some side notes about it. When I save the annotation, I need to keep the offsets of the selected text. Note that the text is taken from a TXT file that may include spaces, tabulations, newlines, etc.
Now I put the text into a pre tag and call the Selection object in JS to get the offsets. By using a pre container, I have perfect correspondence between the offsets of the selection and the offsets in the TXT file.
pre
pre
Now I need to add some formatting information on this text (for instance, highlight the portions of text already annotated by other users): if I add some span s with the background color, I mess the information about the selection and the offsets.
span
Any idea on how to deal with this problem?


$(document).ready(function() {
$("#button").click(function() {
const selection = window.getSelection()

let selectedText = selection.toString()
let startOffset = selection.anchorOffset
let endOffset = selection.focusOffset

console.log(selectedText, startOffset, endOffset)
})
})
script src="https://cdnjs.cloudflare.com/ajax/lib..." /script
pre id="file-content" This is my text.

I can have spaces and newlines.


Bye! /pre

button id="button"
Click me
/button





$(document).ready(function() {
$("#button").click(function() {
const selection = window.getSelection()

let selectedText = selection.toString()
let startOffset = selection.anchorOffset
let endOffset = selection.focusOffset

console.log(selectedText, startOffset, endOffset)
})
})
script src="https://cdnjs.cloudflare.com/ajax/lib..." /script
pre id="file-content" This is my text.

I can have spaces and newlines.


Bye! /pre

button id="button"
Click me
/button



$(document).ready(function() {
$("#button").click(function() {
const selection = window.getSelection()

let selectedText = selection.toString()
let startOffset = selection.anchorOffset
let endOffset = selection.focusOffset

console.log(selectedText, startOffset, endOffset)
})
})
script src="https://cdnjs.cloudflare.com/ajax/lib..." /script
pre id="file-content" This is my text.

I can have spaces and newlines.


Bye! /pre

button id="button"
Click me
/button

$(document).ready(function() {
$("#button").click(function() {
const selection = window.getSelection()

let selectedText = selection.toString()
let startOffset = selection.anchorOffset
let endOffset = selection.focusOffset

console.log(selectedText, startOffset, endOffset)
})
})
$(document).ready(function() {
$("#button").click(function() {
const selection = window.getSelection()

let selectedText = selection.toString()
let startOffset = selection.anchorOffset
let endOffset = selection.focusOffset

console.log(selectedText, startOffset, endOffset)
})
})
script src="https://cdnjs.cloudflare.com/ajax/lib..." /script
pre id="file-content" This is my text.

I can have spaces and newlines.


Bye! /pre

button id="button"
Click me
/button
script src="https://cdnjs.cloudflare.com/ajax/lib..." /script
pre id="file-content" This is my text.

I can Source of the question:
https://stackoverflow.com/questions/7...

Question and source license information:
https://meta.stackexchange.com/help/l...
https://stackoverflow.com/