How to read text in HTML

[hiuchan]

I tried to post the same subject in the Javascript forum but couldn't get the solution after a couple good members tried to help out. I was advised to post the same question in the DOM Scripting forum so here it is:

My question is, if I want to extract content (text) in a HTML file, how can I do it? For example, part of the HTML file will look like this:

...
<font size="3">
Hello!
</font>
...

I want to know how to extract the word "Hello".

The suggestion I got was to modify the HTML file to use <font id="id name"> and write a few line of Javascript to extract the content "Hello" based on the "id name". However, the most important thing is, I am only allowed to append Javascript function(s) to the **ORIGINALLY EXISTING** HTML file so I can't change the original <font size="3"> tag to <font id="id name"> tag.

Any suggestion please kindly let me know. If you think it is not possible to do it, I would also like to know.

Thanks!

[Vladdy]

Let me start by saying that font tag is not a really good example here, since it is depreciated and should not be used when coding with DOM compatibility in mind (it woudl still work, but.....)

You can access any text on your page by going through the nodes tree. If you need a quick access to a given element, the best way is to give it an id and use document.getElementById method.

[Bosko]

But what if the nodes don't have ID's?
If the DOM tree of the html page stays the same,so that you know how many font tags there are then you can use this:
var test=document.getElementsByTagName('font');
test[0].innerHTML="blah";

[hiuchan]

Yes, this will solve my problem. In my HTML page, I will always have one and only one special content after the font tag which I need to locate and it will stay the same each time. In my example, I used the word "Hello" to represent this special static content.

Therefore the getElementsByTagName('font') will work if I add the for loop:

var test=document.getElementsByTagName('font');
for (var i=0; i<test.length; i++) {
if (test[i].innerHTML == 'Hello')
alert(test[i].innerHTML);
else
alert('no found yet');
}

Hmmm...I guess I am right?! Thanks for your help, guys!

[jim1061]

Hello,

I am trying to write code that will extract information from an html page and print the information. The html page will list codes a company uses to identify a wide range of colors in their available swatches. The html page allows a customer to drag and drop colors on to pictures and when done the customer can print out the page (final picture) and bring it in to the company for ordering. Within the HTML are the colors used to create the final picture.

I am a novice with Javascript but am somewhat familiar with code structure. Each color that can be used has a two letter prefix and there are only two possibilities (BW and BS). I need to insert a script that provides a button that when clicked will write a report of the colors in the html file. Is it possible to write Javascript that will look for BW## or BS##, collect those codes and then print them out when the button is selected?

I'll need to customize it and may ask for further assistance but right now I'm trying to work that script which will simply print a list of all BS and BW colors used within the web page. Any help is much appreciated.

Jim

[jscheuer1]

When it comes to printing specific page contents in specific ways, a css stylesheet with the media="print" attribute specified can work wonders. Sections of the page can be excluded by setting their display to none in this stylesheet. Items that you do not want shown live but want printed can have their style set display none in the regular stylesheet and to display block in the media="print" one.

[jim1061]

"Items that you do not want shown live but want printed can have their style set display none in the regular stylesheet and to display block in the media="print" one"

I'm not trying to hide anything "live". Rather I see the code contains my colors and I just want to extract them and have them printed out. My needs become a bit more customized too in that there are sections of the picture "blocked" and labeled... in other words 3 or 4 sections of the photo are blocked together and those regions are designated a letter (ie:A or B or C) where when one color is dropped in a section all of the "blocked" regions get filled with the color. The final printout will not only need to list all colors used but which region of the photo they appeared in so the company has an accurate record of what the customer is looking for and retains the combinations accurately. Its all extracting data and printing so in its simplest form I was looking for javascript that is first able to pull out the information. Once that is accomplished the code must be made a little more fancy to extract the color codes and list them with the regions they are associated with.

Jim