CODEWITHSUNDEEP
javascripthtmldom
jay
jay

Reputation: 3667

Error while taking html of user selected Text

I have the following code for taking the html code of user selected text. It works perfectly without an open <span> tag.

function getHtml() {
var html = "";
if (typeof window.getSelection != "undefined") {
    var sel = window.getSelection();
    if (sel.rangeCount) {
        var container = document.createElement("div");
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            container.appendChild(sel.getRangeAt(i).cloneContents());
        }
        html = container.innerHTML;
    }
} else if (typeof document.selection != "undefined") {
    if (document.selection.type == "Text") {
        html = document.selection.createRange().htmlText;
    }
}
alert(html); }

If there is an Open <span> tag in the code for user selected text, it automatically adds a closing </span> tag. Is there a solution to fix this problem?

HTML Code Used :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<SCRIPT LANGUAGE="JavaScript" SRC="HighlightedString.js">
</SCRIPT>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Red and Louis</title>
    <link rel="stylesheet" media="screen" type="text/css" href="screen.css" />
    <link rel="stylesheet" media="print" type="text/css" href="other.css" />

</head>
<body onmouseup="getHtml()">
<div id="story">
<h1>Red and Louis</h1>

<p>Once upon a time in the middle of a large forest in Western Massachusetts, there lived a little girl who was about 14 years old and who loved baseball.  
<span style="font-family:Verdana, sans-serif; font-size:10pt">Text Within Span </span>
She thought that if she had grown up in the Midwest where there were hardly any trees, she would have been one of the best baseball players ever, but since she lived in the middle of a forest, there was no way for her to practice.  She had tried once but every ball had headed straight for the trees and though she thought they probably would have been homeruns, she couldn&rsquo;t tell for sure.</p>


</body>
</html>

Upvotes: 1

Views: 144

Answers (2)

Tim Down
Tim Down

Reputation: 324707

There isn't really an easy way to get what you want. That function is returning you one possible HTML representation of the content. What it is not doing is returning a substring of the original HTML returned by the server to the browser.

In browsers other than IE < 9, it creates a copy of the selected content as a DOM DocumentFragment. To do this it has to create a tree of nodes by copying only the selected parts of partially selected nodes. It is this tree that is then serialized back into a string of HTML.

It would be possible to do something a bit complicated to compare the cloned selection content with the original nodes and omit closing tags for partially selected nodes from the output but I don't see any great gains in doing so.

Upvotes: 1

adeneo
adeneo

Reputation: 318342

Your converting the selected text to html and inserting it in an element, which will also close any open tags.

Not sure what you're using this for, but html = container.innerText; should insert it as text instead, and leave out the tags, if that is what you want ?

Upvotes: 0

Related Questions