LanguagesJavaScriptRemove all HTML Flags

Remove all HTML Flags

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.



Hi there…

When HTML Goodies first became a domain unto itself, I was in charge of accepting my own advertising. Everyone wanted to advertise, but nobody wanted to pay. Many smaller software companies would send me full versions of their work in trade for some banner ads. Some software was good, some stunk.

One I will never forget was an HTML toolkit that offered about six helper applications under one umbrella. It would spell check, test your HTML, and do a few other things. One of the effects was an HTML-to-text converter. It took any HTML document and simply eliminated the tags. I thought that was the silliest thing the first time I saw it. Then I began using it. It easily became the most used portion of the software package. I used it to death.

The script is by a guy who calls himself CompuH@cker. Give this one a try. You’ll be amazed at how often you’ll actually use the program. I was.

 


The Script’s Effect



Here’s the code

 


As with any script tip that contains form elements, we begin with them because you know their names will come up somewhere else in the script. The form looks like this:


<FORM name=Check>
<TEXTAREA cols=50 name=Input rows=6>
</TEXTAREA>
<INPUT onClick=doit(); type=button value="Remove all HTML Tags">
<TEXTAREA cols=50 name=Output rows=6>
</TEXTAREA> 
</FORM>


There are only three elements to play with: two textarea boxes and a form button. Notice the order in which they are written to the page. Keep them in that order: box, button, box. It’s help the script to run correctly.

The form itself is named “Check”. Note the capital “C”. The first textarea box is named “Input” and the second is named “Output”. That makes sense.

The button is a basic form button that trigger the function doit() through the use of an onClick Event Handler. Now that we know all the parts, let’s take a look at the doit() function.


function doit()
{
ToCheck = window.document.forms['Check'].element
['Input'].value;

Checked = DelHTML(ToCheck);

window.document.forms['Check'].elements['Output'].value = Checked;
}


The function alone is a little hard to describe all by itself because it doesn’t stand alone. It relies on other functions earlier in the script, but we need to start somewhere, so…

The function starts by setting the text written into the first textarea box to the variable “ToCheck”.

The hierarchy format is a little different than I’m used to writing, but it works just the same. The “window” is the ultimate in JavaScript. “Window” is always highest in the hierarchy of elements. It’s so large, in fact, you don’t need to use it. The script just assumes “window” in the highest element and it’s always right.

The “document’ is next followed by the form and the name of the form in square brackets. The reason for that format rather than just naming the form is that if need be, this one script can accommodate multiple forms. At the moment it’s pretty well set because ‘Check’ is written in there, but if you wanted, you could set up a series of forms and set them all to an array. This one script would accept the form arrays pretty easily.

Next in the hierarchy statement is “elements” and the element is named, again by the square bracket method. In this case we want the form named “Check” and the element “Input” which is the text written into the first textarea box.

Finally, the value of what is written into the box is grabbed with the command “value”. You have to have that, or the hierarchy statement will be denoting the box itself rather than the text within the box. It’s common; you’ve probably seen it numerous times before.

OK, we’re set the text in the first box to a variable. Next, a new variable, “Checked,” is created and given the value of a function we’ll get to later,
DelHTML(ToCheck).

Notice what the DelHTML function is acting upon: the text inside the first textarea box. We just named that “ToCheck”.

The third line of the function follows the same format as the first. It uses an array format hierarchy statement to denote the second textarea box (Output) in the form “Check”.

The value of the second textarea box is set to “Checked,” which is the text in the first textarea box after being run through the DelHTML() function.

So the doit() function grabs the grabs the text in the first box, sends it to the DelHTML() function and then takes what is returned and posts it in the second textarea box.

With me? Good. Next week we’ll find out what that DelHTML() function is all about.

Next Week: DelHTML()

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories