homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Accessing nodes in a DocumentFragment or selected text?
containsNode method failing, trying to find div element in DocumentFragment
JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4330388 posted 7:52 am on Jun 24, 2011 (gmt 0)

I'm having a heck of a time trying to determine if a any divisible element is inside of a selected range (in part or whole). My goal is to create a blockquote element with the selected text except if the selected text contains a divisible element (in part or whole) as that implies the user is selecting text that is not intended to be quoted (e.g. forum user name, post count, join date). The only trouble I'm having is figuring out how to determine (reliably) if a divisible element is inside of the selected text.

The selected XHTML is copied via the cloneNode method however I want to prevent users from selecting invalid parts of the page (e.g. outside of a forum post's divisible element or including that divisible element itself). However being in part or whole the containsNode method is failing miserably (var z = 0; window.getSelection().containsNode(document.getElementsByTagName('div)[z],false/true). I was able to use the childNodes property on the variable assigned to contain the cloned node however it's childNodes.length is always reported as 0 so that was shot down rather quickly.

So I'm wondering if there is a method that I can use to iterate over each element/node in a DocumentFragment? I've also tried figuring out how to iterate over the XHTML in the selected text (window.getSelection()) without success. The only way I can think to make this work is cheaping out by appending the XHTML to a temporary element and then scan it for any divisible elements though there has to be a valid way to do this with the DOM.

Below is an example of one manner I've attempted to approach the issue. Thoughts please?

- John

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<title>Selected text contains div?</title>
<script type="text/javascript">

function test()
var a = document.getElementById('body').getElementsByTagName('div');
var l = false;
for (var i=0;i<=a.length;i++)
// Set line below to true or false when selecting only text (e.g "om tex") not successful either way.
if (window.getSelection().containsNode(document.getElementsByTagName('div')[i],false)) {l = true; break;}

<style type="text/css">
body {background-color: #000; color: #f0f;}
div {margin: 0px 20px 20px 20px; padding-top: 20px; outline: #ff0 solid 1px;}
p {color: #fff;}


<div id="body">

<p>some text 1</p>
<p>some text 2</p>
<p>some text 3</p>

<p>some text 4</p>
<p>some text 5</p>
<p>some text 6</p>

<input onclick="test();" type="button" value="Contains divisible element?" />





WebmasterWorld Senior Member 5+ Year Member

Msg#: 4330388 posted 4:53 am on Jun 27, 2011 (gmt 0)


Range properties in particular, seems relevent. Cross browser support looks messy.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved