469,336 Members | 5,552 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,336 developers. It's quick & easy.

modifying and writing contents of a textRange

Hi,

I’m trying to modify a DHTML editor that parses a style-sheet
via PHP and instead of modifying the tags via execCommand(), find a
way of writing inline styles by way of adding <span style=> tags
around the selected text.

Easier said than done. My first though was to do a search and replace
on the innerHTML, but falls down if there is more than one match (it
will only modify the first occurrence). I suspect that even if I could
find the text around the selected area, this could still fall down for
same reason.

So, I’ve got the selected text via the createTextRange() method.
How do I modify this text and write it back out to the textarea.

I suspect finding a way of finding the positioning within the
innerHTML would be useful, so any suggestions will be appreciated.

Rgds
Neil.
Jul 23 '05 #1
6 10610


sentinel wrote:

So, I’ve got the selected text via the createTextRange() method.
How do I modify this text and write it back out to the textarea.


You can (with IE/Win only) simply do
range.pasteHTML('<span style="background-color: yellow;>' +
range.text + '<\/span>');
see
http://msdn.microsoft.com/library/de.../pastehtml.asp
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #2
Thanks for that. Do you know of a solution that will work on Netscape 7.1 ?

Neil.

Martin Honnen <ma*******@yahoo.de> wrote in message news:<40********@olaf.komtel.net>...
sentinel wrote:

So, I’ve got the selected text via the createTextRange() method.
How do I modify this text and write it back out to the textarea.


You can (with IE/Win only) simply do
range.pasteHTML('<span style="background-color: yellow;>' +
range.text + '<\/span>');
see
http://msdn.microsoft.com/library/de.../pastehtml.asp

Jul 23 '05 #3


sentinel wrote:
Do you know of a solution that will work on Netscape 7.1 ?


Netscape doesn't implement the document.selection object that IE has,
nor the TextRange that IE has.
It has a buggy implementation of the W3C DOM Level 2 Range specification
documented at
http://www.w3.org/TR/DOM-Level-2-Tra...ge/ranges.html
which is connected to its selection object returned by
window.getSelection()
whose interface is documented at
http://lxr.mozilla.org/seamonkey/sou...ISelection.idl
Theoretically you should be able to use a method like surroundContents:
http://www.w3.org/TR/DOM-Level-2-Tra...ge-Surrounding
to wrap some range content into a span element for instance but last
time I have tried that with Netscape 7 it failed due to bugs.

When I try the following with Mozilla 1.7 or FireFox 0.9

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>does surroundContents work?</title>
<script type="text/javascript">
function wrapSelection (cssClassName) {
if (typeof window.getSelection != 'undefined') {
var selection = window.getSelection();
if (typeof selection.rangeCount != 'undefined' &&
selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
if (typeof range.surroundContents != 'undefined') {
var span = document.createElement('span');
span.className = cssClassName;
range.surroundContents(span);
}
}
}
}
</script>
<style type="text/javascript">
..selectionHighlight {
background-color: lightyellow;
}
</style>
</head>
<body>
<p>
Select some text in this paragraph with the mouse.
Then press the highlight button.
All for Kibology. Kibology for all.
</p>
<form action="" onsubmit="return false;">
<p>
<input type="button" value="highlight selection"
onclick="wrapSelection('selectionHighlight');">
</p>
</form>
</body>
</html>

I still get an error on the surroundContents call:

Error: uncaught exception: [Exception... "Index or size is negative or
greater than the allowed amount" code: "1" nsresult: "0x80530001
(NS_ERROR_DOM_INDEX_SIZE_ERR)" location:
"http://localhost/javascript/test20040623.html Line: 15"]

which I think is caused by the buggy Mozilla implementation of
Range/surroundContents.
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #4
I guess I'm going to have to do a little experimentation...

I need to construct something that will work on an OS X browser as well as IE5+.

Martin Honnen <ma*******@yahoo.de> wrote in message news:<40******@olaf.komtel.net>...
sentinel wrote:
Do you know of a solution that will work on Netscape 7.1 ?


Netscape doesn't implement the document.selection object that IE has,
nor the TextRange that IE has.
It has a buggy implementation of the W3C DOM Level 2 Range specification
documented at
http://www.w3.org/TR/DOM-Level-2-Tra...ge/ranges.html
which is connected to its selection object returned by
window.getSelection()
whose interface is documented at
http://lxr.mozilla.org/seamonkey/sou...ISelection.idl
Theoretically you should be able to use a method like surroundContents:
http://www.w3.org/TR/DOM-Level-2-Tra...ge-Surrounding
to wrap some range content into a span element for instance but last
time I have tried that with Netscape 7 it failed due to bugs.

When I try the following with Mozilla 1.7 or FireFox 0.9

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>does surroundContents work?</title>
<script type="text/javascript">
function wrapSelection (cssClassName) {
if (typeof window.getSelection != 'undefined') {
var selection = window.getSelection();
if (typeof selection.rangeCount != 'undefined' &&
selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
if (typeof range.surroundContents != 'undefined') {
var span = document.createElement('span');
span.className = cssClassName;
range.surroundContents(span);
}
}
}
}
</script>
<style type="text/javascript">
.selectionHighlight {
background-color: lightyellow;
}
</style>
</head>
<body>
<p>
Select some text in this paragraph with the mouse.
Then press the highlight button.
All for Kibology. Kibology for all.
</p>
<form action="" onsubmit="return false;">
<p>
<input type="button" value="highlight selection"
onclick="wrapSelection('selectionHighlight');">
</p>
</form>
</body>
</html>

I still get an error on the surroundContents call:

Error: uncaught exception: [Exception... "Index or size is negative or
greater than the allowed amount" code: "1" nsresult: "0x80530001
(NS_ERROR_DOM_INDEX_SIZE_ERR)" location:
"http://localhost/javascript/test20040623.html Line: 15"]

which I think is caused by the buggy Mozilla implementation of
Range/surroundContents.

Jul 23 '05 #5
The only way I could figure around this on Netscape 7.1/Mozilla is to
get the range, delete it, create a new node, insert new node contents,
then use a regular expression search and replace to modify the
innerHTML content.

The is a bit of a quick-fix hack, and major drawback to this is that
getSelection only returns text, not the HTML, so assume I have lots of
line breaks or paragraph breaks within the HTML source, these vanish
when I insert the new node contents.

I seriously can't think of a better way around this....

var re = /(&lt;span)([^&]+)(&gt;)([^&]+)(&lt;\/span&gt;)/img;
var re1 = /(<span[^>]+><\/span>)/img;

var selection = window.getSelection();
var copytext = selection.toString();

var newHTML = "<span style='//your style//'</span>";

rng = selection.getRangeAt(0);
selection.deleteFromDocument();
newRng = selection.getRangeAt(0);
replaceText = document.createTextNode(newHTML);
newRng.insertNode(replaceText)
var rp = window.document.body.innerHTML;
rp = rp.replace(re, "<span$2>$4</span>");
rp = rp.replace(re1, ""); // remove multiple redundant tags
window.document.body.innerHTML = rp;

Neil.
ne**@sentinel.f9.co.uk (sentinel) wrote in message news:<f1**************************@posting.google. com>...
I guess I'm going to have to do a little experimentation...

I need to construct something that will work on an OS X browser as well as IE5+.

Martin Honnen <ma*******@yahoo.de> wrote in message news:<40******@olaf.komtel.net>...
sentinel wrote:
Do you know of a solution that will work on Netscape 7.1 ?


Netscape doesn't implement the document.selection object that IE has,
nor the TextRange that IE has.
It has a buggy implementation of the W3C DOM Level 2 Range specification
documented at
http://www.w3.org/TR/DOM-Level-2-Tra...ge/ranges.html
which is connected to its selection object returned by
window.getSelection()
whose interface is documented at
http://lxr.mozilla.org/seamonkey/sou...ISelection.idl
Theoretically you should be able to use a method like surroundContents:
http://www.w3.org/TR/DOM-Level-2-Tra...ge-Surrounding
to wrap some range content into a span element for instance but last
time I have tried that with Netscape 7 it failed due to bugs.

When I try the following with Mozilla 1.7 or FireFox 0.9

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>does surroundContents work?</title>
<script type="text/javascript">
function wrapSelection (cssClassName) {
if (typeof window.getSelection != 'undefined') {
var selection = window.getSelection();
if (typeof selection.rangeCount != 'undefined' &&
selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
if (typeof range.surroundContents != 'undefined') {
var span = document.createElement('span');
span.className = cssClassName;
range.surroundContents(span);
}
}
}
}
</script>
<style type="text/javascript">
.selectionHighlight {
background-color: lightyellow;
}
</style>
</head>
<body>
<p>
Select some text in this paragraph with the mouse.
Then press the highlight button.
All for Kibology. Kibology for all.
</p>
<form action="" onsubmit="return false;">
<p>
<input type="button" value="highlight selection"
onclick="wrapSelection('selectionHighlight');">
</p>
</form>
</body>
</html>

I still get an error on the surroundContents call:

Error: uncaught exception: [Exception... "Index or size is negative or
greater than the allowed amount" code: "1" nsresult: "0x80530001
(NS_ERROR_DOM_INDEX_SIZE_ERR)" location:
"http://localhost/javascript/test20040623.html Line: 15"]

which I think is caused by the buggy Mozilla implementation of
Range/surroundContents.

Jul 23 '05 #6
sentinel wrote:
Thanks for that. Do you know of a solution that will work on Netscape 7.1 ?
The Gecko DOM as of Netscape 7.1, among other UAs, provides
`selectionStart' and `selectionEnd' properties for HTMLInputElement
and HTMLTextAreaElement objects:

function replaceSelection_Gecko(o, s)
{
var s2 = o.value;
o.value = s2.substring(0, o.selectionStart)
+ s + s2.substr(o.selectionEnd + 1);
}

replaceSelection_Gecko(document.forms[0].elements['myInput'], "foobar");
[...]


Please do not top-post, see <http://jibbering.com/faq/>.
PointedEars
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

15 posts views Thread by Paul Paterson | last post: by
33 posts views Thread by Jason Heyes | last post: by
1 post views Thread by gm1974 | last post: by
1 post views Thread by Steve | last post: by
3 posts views Thread by Chris Bingham | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by Marylou17 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.