Programmers’ Patch: Next TEXT node in a HTML DOM

The Rangy tool is great for making cross-browser HTML selections. It has this useful function "surroundContents", which pastes in a span around the text of the selection. But it refuses to work if the selection crosses an element boundary. It's so stupid, because there is a perfectly sound way to wrap all the text elements in one selection, which is what I wanted. I was trying to implement a commenting tool, which adds a comment to an arbitrary selection in HTML. So the range needs to be coloured and have something to activate it when the user clicks on it. To do that I can't accept rangy's restriction on surroundContents. So I wondered if I could write a simple function that would wrap ANY text elements in the current selection with <span class="someclass">...</span>. It turns out it was pretty easy, although I couldn't find anything on the Web by searching. Here's my test code. If you check the HTML you'll see that it works when going up, down or across the DOM tree. According to the specs this works on any browser. This is a HTML DOM thing, so not much point converting it to jQuery. It should ideally be part of Rangy or jQuery, or converted to a jQuery plugin.

<html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script type="text/javascript">
/**
 * Get the first text-node of any DOM element
 * @param elem the element to search for text
 * @return a text node or null
 */
function firstTextNode( elem ) {
    if ( elem.nodeType==3 && elem.nodeValue.length!=0 )
        return elem;
    else if ( elem.firstChild != null 
        && firstTextNode(elem.firstChild) != null )
        return firstTextNode(elem.firstChild);
    else if ( elem.nextSibling != null )
        return firstTextNode(elem.nextSibling);
    else
        return null;
}
/**
 * Find the next text node
 * @param elem the current text element
 * @return another text element or null
 */
function nextTextNode(elem) {
    if ( elem.nextSibling != null 
        && firstTextNode(elem.nextSibling) != null )
        return firstTextNode(elem.nextSibling);
    else
    {
        var parent = elem.parentNode;
        while ( parent != null )
        {
            var sibling = parent.nextSibling;
            while ( sibling != null )
            {
                if ( firstTextNode(sibling) != null )
                    return firstTextNode(sibling);
                else
                    sibling = sibling.nextSibling;
            }
            // no more text nodes on this level
            parent = parent.parentNode;
        }
    }
    return null;
}
function findTextNode(id)
{
    var elem = document.getElementById(id);
    var textNode = firstTextNode(elem);
    var next = nextTextNode(textNode);
    if ( next != null )
        alert( next.nodeValue );
}
</script>
</head>
<body>
<div>
<p id="para">Hello world. <i id="italics">This is italics </i><span id="not">and this is not. </span><table border="1"><tr><td id="firstTD">really inset</td><td id="nextTD">and another</td></tr></table>Oh la la!</p>
<button onclick="findTextNode('para')">para</button>
<button onclick="findTextNode('italics')">italics</button>
<button onclick="findTextNode('not')">this is not</button>
<button onclick="findTextNode('firstTD')">first TD</button>
<button onclick="findTextNode('nextTD')">next TD</button>
</body>
</html>

Programmers’ Patch

Friday, May 22, 2015

Next TEXT node in a HTML DOM

No comments:

Post a Comment