Stack Overflow Q16359314 (3)

Application of $.fn.indexOfTagIncludingHTML(tag) to user's question.

by acheong87

HTML

<span id="startindex">Please select the ampersand and see it start. Than select the space after the ampersand and see the count difference(20-25 instead of 20-21)</span>
<div id="textBlock" style="width:300px; background: red; height:500px;">This is a cool test & stuff like that</div>

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').indexOfTagIncludingHTML('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();
}

$.fn.lengthOfStartTag = function () {
    var node = this[0];
    if (!node || node.nodeType != 1) {
        $.error("Called $.fn.lengthOfStartTag on non-element node.");
    }
    if (!$(node).is(":empty")) {
        return node.outerHTML.indexOf(node.innerHTML);
    }
    return node.outerHTML.length;
}

$.fn.lengthOfEndTag = function () {
    var node = this[0];
    if (!node || node.nodeType != 1) {
        $.error("Called $.fn.lengthOfEndTag on non-element node.");
    }
    if (!$(node).is(":empty")) {
        var indexOfInnerHTML = node.outerHTML.indexOf(node.innerHTML);
        return node.outerHTML.length - (indexOfInnerHTML + node.innerHTML.length);
    }
    return -1;
}

$.fn.indexOfTagIncludingHTML = 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) {
            chars += node.nodeValue.length;
        } else if (type == 1) {
            if (node.tagName == tag.toUpperCase()) {
                return chars;
          ...