By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,776 Members | 1,397 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,776 IT Pros & Developers. It's quick & easy.

Converting string content to html

P: n/a
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

Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


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

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

Jul 23 '05 #2

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

Jul 23 '05 #3

P: n/a
Alex wrote:
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/

Jul 23 '05 #4

P: n/a
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[i]){
switch (w) {

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

default:
alert('Setting style: ' + w + ' to \'' + obj[i][w] + '\'');
// oSpan.style.w = obj[i][w];
// oSpan.style.w = '\'' + obj[i][w] + '\'';
// oSpan.style.fontWeight = 'bold';
oSpan.style.color = obj[i][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>


--
Rob
Jul 23 '05 #5

P: n/a
RobG wrote:
<snip>
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.
Jul 23 '05 #6

P: n/a
Richard Cornford wrote:
RobG wrote:
<snip>
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.
--
Rob
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.