Converting string content to html

[Alex]

Hi all.

Well, I need some light in this simple thing I'm trying to do. I'm
using the XMLHttpRequest to retrieve some data from a db via php
script. The result is passed to a "results" array of strings, which
contain the data from the script.

But, the data from the script, which are the content of the strings,
have html tags in it. The thing is: I'm using the DOM to append the
string result to a table already built in the page (using
create_element and appendchild).

insertO = document.getElementById("output_table");
oTR = document.createElement('tr');
oTD = document.createElement('td');
oText = document.createTextNode(Text);
oTD.appendChild(oText);
oTR.appendChild(oTD);
insertO.tBodies[0].appendChild(oTR);

The Text var would contain something like "<font color="red">this
<b>is</b> html</font>".

This way the output isn't parsed, i.e., it shows the tags.
Does anyone have an idea on how to overcome this?

Thks
Alex

 

[unruly]

whoops, I guess I slightly misread your post. You'd still want to do a
regexp replace by using this:

/<[^<>]*>//ig as the expression.

 

[unruly]

You could just do a regexp replace for < and > for their HTML character
equivilents, &lt; and &gt; respectivly.

 

[RobB]

Hi all.

Well, I need some light in this simple thing I'm trying to do. I'm
using the XMLHttpRequest to retrieve some data from a db via php
script. The result is passed to a "results" array of strings, which
contain the data from the script.

But, the data from the script, which are the content of the strings,
have html tags in it. The thing is: I'm using the DOM to append the
string result to a table already built in the page (using
create_element and appendchild).

insertO = document.getElementById("output_table");
oTR = document.createElement('tr');
oTD = document.createElement('td');
oText = document.createTextNode(Text);
oTD.appendChild(oText);
oTR.appendChild(oTD);
insertO.tBodies[0].appendChild(oTR);

The Text var would contain something like "<font color="red">this
<b>is</b> html</font>".

This way the output isn't parsed, i.e., it shows the tags.
Does anyone have an idea on how to overcome this?

Thks
Alex

Did you want the HTML to be parsed, or discarded? If it's the former,
this might be a textbook case for the value of innerHTML....

http://www.developer-x.com/content/innerhtml/

 

[RobG]

RobB wrote:
[...]

Did you want the HTML to be parsed, or discarded? If it's the former,
this might be a textbook case for the value of innerHTML....

http://www.developer-x.com/content/innerhtml/

Or a textbook case for ensuring that the text object(s) were
appropriately serialized in the XML in the first place. ;-)

(I make no admission to knowing what that format might be!)

Which requires the obvious response: supposing I wanted to use DOM to
create text nodes for the above case, what is the appropriate format
so that I can create appropriate DOM objects then give them
appropriate attributes?

Below is a feeble attempt to get a start on it, but I could not work
out how to read styles from an object then apply them to an element.

e.g. if I create a span 'oSpan' and put some text into it with a text
node, then create say w='color' and y='red', the following does
not seem to work:

oSpan = document.createElement('span');
oSpan.appendChild(document.createTextNode('stuff'));
oSpan.style.w = y;

Then append oSpan to the document, 'stuff' is in the default
color. If I explicitly use:

oSpan.style.color = 'red';
or
oSpan.style.color = y;

'stuff' is red.

If there really is no way to do this? Do I need a case statement for
every single style attribute I want to support? If so, why isn't
innerHTML (or some similar method) available in DOM 3? Or is there
and I'm just displaying my ignorance?


<style type="text/css">
..rg {color:red;}
</style>
<script type="text/javascript">
function addStuff(z){
var tgt = document.getElementById(z);

// obj should be created by parsing XML, save that for later...
var obj = {};
obj[0] = {text:'this ','color':'red'}
obj[1] = {text:'is','fontWeight':'bold'}
obj[2] = {text:' html','fontWeight':'normal'}

var i = 0;
var oTxt, oSpan;

do {
for (w in obj){
switch (w) {

case 'text':
alert('Creating: ' + w + ' \'' + obj[w] + '\'');
oSpan = document.createElement('span');
oTxt = document.createTextNode(obj[w]);
oSpan.appendChild(oTxt);
break;

default:
alert('Setting style: ' + w + ' to \'' + obj[w] + '\'');
// oSpan.style.w = obj[w];
// oSpan.style.w = '\'' + obj[w] + '\'';
// oSpan.style.fontWeight = 'bold';
oSpan.style.color = obj[w];
}
}
alert('adding ' + oSpan.nodeName);
tgt.appendChild(oSpan);
}
while ( obj[++i] )
}
</script>
<input type="button" onclick="addStuff('xx')" value="addStuff">
<br>
<span id="xx"></span><br>
<span class="rg">sample text</span>

 

[Richard Cornford]

RobG wrote:

e.g. if I create a span 'oSpan' and put some text into
it with a text node, then create say w='color'
and y='red', the following does not seem to work:

oSpan = document.createElement('span');
oSpan.appendChild(document.createTextNode('stuff'));
oSpan.style.w = y;

Then append oSpan to the document, 'stuff' is in the default
color.

That gives you a property of the style object called 'w' to which the
string value 'red' has been assigned. There is no reason to expect a 'w'
property of a style object to affect the presentation of the span.

If I explicitly use:

oSpan.style.color = 'red';
or
oSpan.style.color = y;

'stuff' is red.

If there really is no way to do this? ...

<snip>

oSpan.style[w] = y;

Richard.

 

[RobG]

RobG wrote:

e.g. if I create a span 'oSpan' and put some text into
it with a text node, then create say w='color'
and y='red', the following does not seem to work:

oSpan = document.createElement('span');
oSpan.appendChild(document.createTextNode('stuff'));
oSpan.style.w = y;

[...]

oSpan.style[w] = y;

Dang - thanks!

But I still find accessing properties this way a bit confusing.