Is there a way to get ruby ​​text to convert to HTML text, for indexing purposes? or how to get the text index in HTML exactly?

Question

In the above image, I selected the phrase "macro up myself", which starts at index 140 and ends at index 155.
(Indexes are calculated via the .outerHTML of the parent element (div holds all text))

Now, in the second image, you can see that the range (the part that creates the blue highlight in the HTML screenshot) does not fit where it should be. Also pay attention to the numbers in the upper left corner. The start index is the same, but the end index is just the end index from the first image + length <span class="cha... ...50">

How to get indexes: From javascript: (as in the first picture)

  start_index = parent_element.html().indexOf(selection[0].outerHTML) - 33; // already have a large arbitrary offset, but I'd prefer to know why the indexes aren't lined up. end_index = start_index + html.length; 

These indexes are passed along with the rails server, where it should insert spaces in the text, but the indexes do not match the location of the range selection in HTML.

So my question is: how to get the exact index?

Answer 1

Perhaps you need a cleaner version of the text to work (you have empty space there, it seems). Sort of:

start_index = $.trim(parent_element.text())

On the ruby ​​side, you may need to do the same to make sure you don't have spaces on one. Also, some html objects ( ' ) are displayed on your output, so in ruby ​​code you may need to make sure that you work with the string indices before special characters get html coding.