how to use document fragment
228 views
Skip to first unread message
david
Jan 2, 2011, 1:09:36 PM1/2/11
to Chromium-extensions
I am writing an extension where the user selects some text on a web
page, the user then presses a button where upon the title, url and
selected text are copied to the clipboard. I have already managed to
do this, I now want to be able to delete from the selected text any
text from certain classes from a cloned document fragments dom and
then get the text from that document fragment. How do I do this ? The
document fragment returned from cloneContents() is not able to use
getElementsByClassName . Any help greatly appreciated.
function getRange () {
if (window.getSelection().type == 'Range') {
var newRange =
window.getSelection().getRangeAt( 0 ).cloneContents();
getElementsByClass("imageCaption", newRange);
return newRange.toString();
} else {
alert('select a text in the page and then press this button');
}
}
function getElementsByClass(searchClass,node) {
var nodes = node.getElementsByClassName(searchClass);
while (nodes.length > 0) {
nodes[0].parentNode.removeChild(nodes[0]);
}
}
page, the user then presses a button where upon the title, url and
selected text are copied to the clipboard. I have already managed to
do this, I now want to be able to delete from the selected text any
text from certain classes from a cloned document fragments dom and
then get the text from that document fragment. How do I do this ? The
document fragment returned from cloneContents() is not able to use
getElementsByClassName . Any help greatly appreciated.
function getRange () {
if (window.getSelection().type == 'Range') {
var newRange =
window.getSelection().getRangeAt( 0 ).cloneContents();
getElementsByClass("imageCaption", newRange);
return newRange.toString();
} else {
alert('select a text in the page and then press this button');
}
}
function getElementsByClass(searchClass,node) {
var nodes = node.getElementsByClassName(searchClass);
while (nodes.length > 0) {
nodes[0].parentNode.removeChild(nodes[0]);
}
}
Gildas
Jan 4, 2011, 5:46:20 PM1/4/11
to Chromium-extensions
On 2 jan, 19:09, david <david.fisher...@googlemail.com> wrote:
> [...] The
You can use querySelectorAll method.
var nodes = node.querySelectorAll("." + searchClass);
> [...] The
> document fragment returned from cloneContents() is not able to use
> getElementsByClassName
>
> var nodes = node.getElementsByClassName(searchClass);
> getElementsByClassName
>
You can use querySelectorAll method.
var nodes = node.querySelectorAll("." + searchClass);
david
Jan 4, 2011, 5:57:32 PM1/4/11
to Chromium-extensions
I think I have solved most of the problems so far with the following
code. The problem I have now is that when I use the string returned
from range.toString(); it behaves differently to the string from
window.getSelection().toString() I was using before. The difference is
in the way <p></p> are rendered. I am using the code below to copy to
the clipboard. The window.getSelection().toString() renders <p></p>
correctly where as <p></p> with text in them seem to get ignored.
Blank <p></p> seem to get rendered correctly though. Why? How do I
solve this and could someone point me to some code to render the dom
tree myself please. I only need to render text.
thanks
var proxyTextArea = document.getElementById("id_proxy_ta");
proxyTextArea.value = newtitle + "\n\n" + info.url + "\n\n" +
info.selection + "\n\n" + "[...]" + "\n\n" + "=======" + "\n\n";
proxyTextArea.select();
document.execCommand("copy");
sendResponse({});
function getRange () {
if (window.getSelection().type == 'Range') {
var newRange =
window.getSelection().getRangeAt( 0 ).cloneContents();
var Doc = false;
Doc = document.implementation.createDocument("http://
www.w3.org/1999/xhtml", "html", null);
Doc.documentElement.innerHTML = "<body></body>";
Doc.documentElement.appendChild(newRange);
deleteElementsByClass("relatedItems", Doc);
deleteElementsByClass("imageCaption", Doc);
deleteElementsByClass("related_links_inline", Doc);
var range = Doc.createRange();
range.selectNode(Doc.documentElement);
return range.toString();
} else {
alert('select a text in the page and then press this button');
}
}
function deleteElementsByClass(searchClass,node) {
var nodes = node.getElementsByClassName(searchClass);
while (nodes.length > 0) {
nodes[0].parentNode.removeChild(nodes[0]);
}
return 0;
code. The problem I have now is that when I use the string returned
from range.toString(); it behaves differently to the string from
window.getSelection().toString() I was using before. The difference is
in the way <p></p> are rendered. I am using the code below to copy to
the clipboard. The window.getSelection().toString() renders <p></p>
correctly where as <p></p> with text in them seem to get ignored.
Blank <p></p> seem to get rendered correctly though. Why? How do I
solve this and could someone point me to some code to render the dom
tree myself please. I only need to render text.
thanks
var proxyTextArea = document.getElementById("id_proxy_ta");
proxyTextArea.value = newtitle + "\n\n" + info.url + "\n\n" +
info.selection + "\n\n" + "[...]" + "\n\n" + "=======" + "\n\n";
proxyTextArea.select();
document.execCommand("copy");
sendResponse({});
function getRange () {
if (window.getSelection().type == 'Range') {
var newRange =
window.getSelection().getRangeAt( 0 ).cloneContents();
Doc = document.implementation.createDocument("http://
www.w3.org/1999/xhtml", "html", null);
Doc.documentElement.innerHTML = "<body></body>";
Doc.documentElement.appendChild(newRange);
deleteElementsByClass("relatedItems", Doc);
deleteElementsByClass("imageCaption", Doc);
deleteElementsByClass("related_links_inline", Doc);
var range = Doc.createRange();
range.selectNode(Doc.documentElement);
return range.toString();
} else {
alert('select a text in the page and then press this button');
}
}
var nodes = node.getElementsByClassName(searchClass);
while (nodes.length > 0) {
nodes[0].parentNode.removeChild(nodes[0]);
}
Gildas
Jan 4, 2011, 6:42:50 PM1/4/11
to Chromium-extensions
On 4 jan, 23:57, david <david.fisher...@googlemail.com> wrote:
> Doc.documentElement.appendChild(newRange);
I think you should have written :
Doc.documentElement.firstChild.appendChild(newRange);
> Doc.documentElement.appendChild(newRange);
I think you should have written :
Doc.documentElement.firstChild.appendChild(newRange);
david
Jan 4, 2011, 10:38:46 PM1/4/11
to Chromium-extensions
thanks but the problem remains. An example the first is from
window.getSelection().toString() the second my new code. Why the
difference in interpretation of <p></p> ?
==============
However, he became an alcoholic after working at a bar in Bristol and,
when his claim for asylum was turned down, decided to try to find a
passage home to Morocco.
The first ship kicked him off at Milford Haven in South Wales in
November 2004.
Several stowaway attempts followed and the furthest Ali got was
Ireland.
On his fifth attempt in June 2005 he was found aboard a Russian ship
and sent back to Avonmouth, where he stole some food and a coat to
keep warm.
He was jailed for nine months by a North Somerset magistrate who
ordered he be deported after serving the sentence. On his release, he
was sent to a detention centre for three years, despite constant pleas
to go home.
In October 2008 he was offered a flat in Newcastle amid fears that he
could seriously injure or kill himself hiding on vessels.
But two days later he was found hiding on another boat leaving
Bristol. He was charged with stealing a mobile phone and jacket and
damaging a door, which he admitted.
When he appeared at Bristol Crown Court in December, a judge called
for an inquiry into the fiasco.
======================
However, he became an alcoholic after working at a bar in Bristol and,
when his claim for asylum was turned down, decided to try to find a
passage home to Morocco.
The first ship kicked him off at Milford Haven in South Wales in
November 2004. Several stowaway attempts followed and the furthest Ali
got was Ireland. On his fifth attempt in June 2005 he was found aboard
a Russian ship and sent back to Avonmouth, where he stole some food
and a coat to keep warm.
He was jailed for nine months by a North Somerset magistrate who
ordered he be deported after serving the sentence. On his release, he
was sent to a detention centre for three years, despite constant pleas
to go home.In October 2008 he was offered a flat in Newcastle amid
fears that he could seriously injure or kill himself hiding on
vessels.But two days later he was found hiding on another boat leaving
Bristol. He was charged with stealing a mobile phone and jacket and
damaging a door, which he admitted.
When he appeared at Bristol Crown Court in December, a judge called
for an inquiry into the fiasco.
=====================
window.getSelection().toString() the second my new code. Why the
difference in interpretation of <p></p> ?
==============
However, he became an alcoholic after working at a bar in Bristol and,
when his claim for asylum was turned down, decided to try to find a
passage home to Morocco.
The first ship kicked him off at Milford Haven in South Wales in
November 2004.
Several stowaway attempts followed and the furthest Ali got was
Ireland.
On his fifth attempt in June 2005 he was found aboard a Russian ship
and sent back to Avonmouth, where he stole some food and a coat to
keep warm.
He was jailed for nine months by a North Somerset magistrate who
ordered he be deported after serving the sentence. On his release, he
was sent to a detention centre for three years, despite constant pleas
to go home.
In October 2008 he was offered a flat in Newcastle amid fears that he
could seriously injure or kill himself hiding on vessels.
But two days later he was found hiding on another boat leaving
Bristol. He was charged with stealing a mobile phone and jacket and
damaging a door, which he admitted.
When he appeared at Bristol Crown Court in December, a judge called
for an inquiry into the fiasco.
======================
However, he became an alcoholic after working at a bar in Bristol and,
when his claim for asylum was turned down, decided to try to find a
passage home to Morocco.
The first ship kicked him off at Milford Haven in South Wales in
November 2004. Several stowaway attempts followed and the furthest Ali
got was Ireland. On his fifth attempt in June 2005 he was found aboard
a Russian ship and sent back to Avonmouth, where he stole some food
and a coat to keep warm.
He was jailed for nine months by a North Somerset magistrate who
ordered he be deported after serving the sentence. On his release, he
was sent to a detention centre for three years, despite constant pleas
to go home.In October 2008 he was offered a flat in Newcastle amid
fears that he could seriously injure or kill himself hiding on
vessels.But two days later he was found hiding on another boat leaving
Bristol. He was charged with stealing a mobile phone and jacket and
damaging a door, which he admitted.
When he appeared at Bristol Crown Court in December, a judge called
for an inquiry into the fiasco.
=====================
Reply all
Reply to author
Forward
0 new messages