get user selected HTML text

Joeweitzel · 12-24-2008, 04:51 AM

On IE you can use selection.createRange().htmlText to get the user selected HTML text. Other browsers like Safari and Firefox only have getSelection() which can only return unformated plain text, and there is nothing for HTML text.

Does anyone have a method created to get user selected html text on all browsers?

Thanks

Sephr · 12-24-2008, 05:48 AM

Use this:

Code:

function getSel() {
	if (window.getSelection) {
		return window.getSelection();
	} else if (document.selection) {
		return document.selection.createRange();
	}
}

Joeweitzel · 12-24-2008, 06:21 AM

getSelection only returns plain text not HTML text. I need HTML text. That's my challenge.

itsallkizza · 12-24-2008, 06:57 AM

This works in IE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[

function getSelectionHTML()
	{
	if (document.selection && document.selection.createRange) return (document.selection.createRange()).htmlText;
	return null;
	}

function doSomething()
	{
	alert(getSelectionHTML());
	}

// ]]>
</script>
</head>
<body>

<div>blah blah <em>blah</em> blah <strong>blah</strong> blah</div>

<input type="button" value="click me" onclick="doSomething()" />

</body>
</html>

I'll brainstorm for a cross-browser version.

Joeweitzel · 12-24-2008, 07:38 AM

There is no built-in methods for this on non-IE browsers. What has to be done is a a custom method of getting the start and end position of the getSelected text and then return the innerHTML in a substring. That should do it

Thanks!

itsallkizza · 12-24-2008, 07:52 AM

This doesn't work, but I need some sleep. Maybe you can arrive at a solution from some of the methods I used:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[

function getSelectionHTML()
	{
	if (window.getSelection && (window.getSelection()).rangeCount == 1)
		{
		var selection_text = (window.getSelection()).toString();
		var range = (window.getSelection()).getRangeAt(0);
		var parent_html = range.commonAncestorContainer.innerHTML;
		//var b = document.createElement("b");
		//b.innerHTML = parent_html;
		//var parent_text = b.innerText || b.textContent;
		var first_text = range.startContainer.nodeValue.substr(range.startOffset);
		var last_text = (range.endContainer.nodeValue).substring(0,range.endOffset);
		var start = parent_html.indexOf(first_text);
		var end = parent_html.indexOf(last_text,start+1)+last_text.length;
		return parent_html.substring(start,end);
		}
	else if (document.selection && document.selection.createRange) return (document.selection.createRange()).htmlText;
	return null;
	}

function doSomething()
	{
	alert(getSelectionHTML());
	}

// ]]>
</script>
</head>
<body>

<div>blah blah <em>blah</em> blah <strong>blah</strong> blah</div>

<input type="button" value="click me" onclick="doSomething()" />

</body>
</html>

rnd me · 12-24-2008, 08:09 AM

look no further:

Code:

function selHTML() {

    if (window.ActiveXObject) {
        var c = document.selection.createRange();
        return c.htmlText;
    }

    var nNd = document.createElement("p");
    var w = getSelection().getRangeAt(0);
    w.surroundContents(nNd);
    return nNd.innerHTML;
}

itsallkizza · 12-24-2008, 01:40 PM

Range.surroundContents - didn't occur to me

Nice job.

Perhaps it may be slightly better to run object detection on the specific functions we're going to use though? Also if there is more than one range selected by the user, the code will only return the first range. Also changed "p" to "span" so it wouldn't interfere with the page layout.

Code:

function getSelectionHTML()
	{
	if (window.getSelection)
		{
		var sel = window.getSelection();
		var html = "";
		for (var i=0;i<sel.rangeCount;i++)
			{
			/*Author: rnd_me*/
			var nNd = document.createElement("span");
			var w = sel.getRangeAt(i);
			w.surroundContents(nNd);
			html += nNd.innerHTML;
			}
		return html;
		}
	else if (document.selection && document.selection.createRange) return (document.selection.createRange()).htmlText;
	return null;
	}

This still adds a span every time you run it. Since the OP wanted to return the html of the selected text, it seems like it might be an issue adding html to the html in question... Maybe there's an easy way to remove the spans once we're done with them? .outerHTML = .innerHTML would do the trick if all browsers supported outerHTML (most do not

).

Joeweitzel · 12-24-2008, 05:25 PM

Yes the surroundContents was the creativity I was looking for

Thanks!

I rewrote it to remove the added element, and now its working perfectly (you must pass the HTML text's parent element ):

Code:

function getSelectedHTML( element ) {
	var sel = "";
	if( window.getSelection ) {
		sel = window.getSelection();
	} else if ( document.getSelection ) {
		sel = document.getSelection();
	} else if ( document.selection && document.selection.createRange ) {
		return ( element.selection.createRange() ).htmlText;
	}
	if( sel != "" ) {
		var html = "";
		for ( var i = 0; i < sel.rangeCount; i++ ) {
			var nNd = document.createElement("span");
			var w = sel.getRangeAt(i);
			var prevInnerHTML = element.innerHTML;
			w.surroundContents( nNd );
			html += nNd.innerHTML;
			element.innerHTML = prevInnerHTML;
		}
		return html;
	}
	return null;
};

One more issue:

When you select HTML like this (underlined = selected text):

This is some html text that has been selected.

it returns "text that has been"
when it should be returning "text that has been"

Any ideas?

itsallkizza · 12-24-2008, 06:08 PM

You don't need to pass anything:

Code:

function getSelectionHTML()
	{
	if (document.selection && document.selection.createRange) return (document.selection.createRange()).htmlText;
	if (window.getSelection)
		{
		var sel = window.getSelection();
		var html = "";
		for (var i=0;i<sel.rangeCount;i++)
			{
			var d = document.createElement("span");
			var r = sel.getRangeAt(i);
			var parent_element = r.commonAncestorContainer;
			var prev_html = parent_element.innerHTML;
			r.surroundContents(d);
			html += d.innerHTML;
			parent_element.innerHTML = prev_html;
			}
		return html;
		}
	return null;
	}

Sephr · 12-24-2008, 07:10 PM

I don't think you should put the content into a new element using surroundsContents. You should just use extractContents.

Joeweitzel · 12-24-2008, 07:32 PM

Thanks, but that doesn't always work. Passing the element is more reliable

What about the selection issue I mentioned. Any ideas? It seems to add the opening tag to the returned selected html when you select from before to after a close tag. Any ideas?

Thanks!

itsallkizza · 12-24-2008, 08:01 PM

Quote:

Thanks, but that doesn't always work. Passing the element is more reliable

When wouldn't it work? Having to pass an element greatly devalues this script's worth, so if there's holes in the code I'd like to fix them. There's definitely a way to do it without passing anything.

Quote:

What about the selection issue I mentioned. Any ideas?

I think most people would want/expect it to function as it is currently functioning (ie including the opening tags). If you want to modify it for your personal needs, all you'd need to do is outcome.substr(outcome.indexOf(">")+1). That'll do exactly what you need.

Joeweitzel · 12-25-2008, 06:17 AM

Quote:

Originally Posted by Sephr

I don't think you should put the content into a new element using surroundsContents. You should just use extractContents.

How did you want to use extraContents to do it?

-Itsallkizza
Thanks for the advise, I'll implement it all and post it once it's debugged..

neverwinter · 04-17-2009, 06:20 PM

Code:

var range = window.getSelection().getRangeAt(0);

var startContainer = range.startContainer;
var spanNode = startContainer.ownerDocument.createElement("layer");

var docfrag = range.extractContents();
spanNode.appendChild(docfrag);

range.insertNode(spanNode);

alert(spanNode.innerHTML);

you can try this