Get full (and original) text of an HTML element

Question

Edit: It looks like we identified the solution to this problem via the comments -- which is achieved by getting value of the .outerHTML property. However, it still appears that at least Firefox and Chrome "normalize" original source code when outerHTML is used. For example, outerHTML of

<div id = "a">    <!-- string is 14 characters long //-->

still returns

<div id="a">      <!-- string is 12 characters long //-->

Apparently, the problem would be considered solved if the formatting of the resulting string would match that of the original HTML source code. Ah! Why must outerHTML adjust the original value?

--- Having said this: ---

I'm looking for a solution to get full text of a clicked HTML tag.

Starting point examples (note intentional, legal but mangled formatting):

<div id = "a" style ="color: blue ;">text</div>

// Returns: div
var doc = document.getElementById("id").tagName;

// Returns: array of attribute name/value pair (without = or ")
var attrs = document.getElementById("id").attributes;

How would we go about generating the following text string, when element #a is clicked:

<div id = "a" style= "color: blue ;">

I seem to have not found a solution for this as of yet.

What's this for?

Ultimately, the goal is to determine the length in characters of the arbitrary contents of a tag. Assuming it can be edited in any way that produces acceptable HTML output. For example, the two cases below should return:

<div id=a style="color:blue">            // 28
<div id = "a" style= "color: blue ;">    // 36

Counting is the easy part. It's getting the actual string of that tag, just as it appears in the source code, that is the problem.

Answer 1

Have you tried this?

document.getElementById('a').outerHTML

But this doesn't work in every browser i guess

Answer 2

Use outerHTML to get the full tag and then strip out everything after the open tag.

var openTag = document.getElementById("a").outerHTML.split(">")[0] + ">";

Answer 3

This seems to do what you want:

http://jsfiddle.net/abalter/c3eqnLrc/

html:

<div id="a" class="find-my-length" style="color:blue">First One</div>
<div   id="a  " class="find-my-length"   style= "color: blue ; " > Second     One </div        >

JavaScript:

$('.find-my-length').on('click', function () {
    var htmlString = $(this).prop('outerHTML');
    alert(htmlString + " has " + htmlString.length + " characters.");
});

Note: The one thing that doesn't get counted is spaces between attributes. Spaces within attributes are counted.

From: Get selected element's outer HTML

What about: prop('outerHTML')?

var outerHTML_text = $('#item-to-be-selected').prop('outerHTML');

And to set:

$('#item-to-be-selected').prop('outerHTML', outerHTML_text);