How to find tag line index (element) without counting extended objects?

Question

I have a large piece of text that I want to select, saving the selected part with startindex and endindex . (For example, choosing or in word would give me startindex 1 and endindex 2 )

Everything works correctly, but I have a problem with HTML objects like & (ampersand).

I created a small case in which there is a problem. You can see in the script below that startindex inflated if you select something outside of & , because it does not count & as one character, but rather 5 characters: & .

Is there a way to get it to correctly count special characters like an ampersand without spinning the index?

http://jsfiddle.net/Eqct4/

Javascript

---

 $(document).ready(function() { $('#textBlock').mouseup(function() { var selectionRange = window.getSelection(); if (!selectionRange.isCollapsed) { selectedText = selectionRange.getRangeAt(0).toString(); } document.getElementById('textBlock').setAttribute('contenteditable', true); document.execCommand('strikethrough', false); var startIndex = $('#textBlock').html().indexOf('<strike>'); $('#startindex').html('the startindex is: ' + startIndex); done(); }); }); function done() { document.getElementById('textBlock').setAttribute('contenteditable', false); document.getSelection().removeAllRanges(); removeStrikeFromElement($('#textBlock')); } function removeStrikeFromElement (element) { element.find('strike').each(function() { jQuery(this).replaceWith(removeStrikeFromElement(jQuery(this))); }); return element.html(); } 

I think / know this is due to $('#textBlock').html() used for indexOf instead of text() . The best way to get start and endindex was to <strike> through the selected text, since execCommand allows me to do this, and this is an HTML tag that has never been used in an application.

Answer 1

If you really want to use your code and modify it a bit, you can replace all special characters with the visible equivalent, keeping the html tags ... Change your startIndex declaration to this:

 var startIndex = $('#textBlock').html().replace(/&amp;/g, "&").replace(/&quot;/g, "\"").indexOf('<strike>'); 

you can add replaceaces () functions with other special characters that you want to be considered regular characters, not their HTML version. In my example, I replaced the characters "and" and ".".

Your code has better options; this is an easy way to fix your problem.

Hope this helps a bit, see the forked fiddle here http://jsfiddle.net/vQNyv/

Answer 2

Problem

Using html() returns:

 This is a cool test &amp; <strike>stuff like</strike> that 

Using text() , however, will return:

 This is a cool test & stuff like that 

So, html() needed in order to see the string, <strike> , but then, of course, all special entities are escaped as they should be. There are ways to crack this problem, but imagine what happens if, say, HTML itself is described in the text:

 Use the <strike></strike> tags to strike out text. 

In this case, you need an interpretation,

 Use the <strike></strike> tag to strike out text. 

That is why the only right way to approach this would be to iterate through the DOM nodes.

---

JQuery / DOM solution

Here's the jsFiddle of my solution, and here is the code:

 jQuery.fn.indexOfTag = function (tag) { var nodes = this[0].childNodes; var chars = 0; for (var i = 0; nodes && i < nodes.length; i++) { var node = nodes[i]; var type = node.nodeType; if (type == 3 || type == 4 || type == 5) { // alert('advancing ' + node.nodeValue.length + ' chars'); chars += node.nodeValue.length; } else if (type == 1) { if (node.tagName == tag.toUpperCase()) { // alert('found <' + node.tagName + '> at ' + chars + ', returning'); return chars; } else { // alert('found <' + node.tagName + '>, recursing'); var subIndexOfTag = $(node).indexOfTag(tag); if (subIndexOfTag == -1) { // alert('did not find <' + tag.toUpperCase() + '> in <' + node.tagName + '>'); chars += $(node).text().length; } else { // alert('found <' + tag.toUpperCase() + '> in <' + node.tagName + '>'); chars += subIndexOfTag; return chars; } } } } return -1; } 

Uncomment alert() to get an idea of ​​what's going on. Here is a link to nodeType s.

---

Counting jQuery / DOM outerHTML parameters

Based on your comments, I think you say you want to count HTML tags (by character), but not just for HTML objects. Here is the new jsFiddle of the function itself, and here is the new jsFiddle of it in relation to your problem.