Extending Dreamweaver with its JavaScript API
Pages: 1, 2

Extracting and transforming HTML text

Because we have an HTML code substring now, we need to apply regular expressions to extract the text. We start by eliminating all tags, the regexp used makes things easier, as Dreamweaver will complain about incorrect source code structure.

The next step is, due to HTML's syntax, very important: All entities have to be converted because the special characters & and ; would yield two additional word boundaries in our regexp. So, the code replaces the non-breaking space with a simple white space and the rest into a dummy character.

Now, let's count the word boundaries, and we're almost done. This isn't as obvious as it might seem. The special character \w matches all word characters, which includes "0"..."9" and "_", so it's up to you to treat it as a number, a whole list, or a table of words. If you don't want to, the regexp has to be rewritten.

Fortunately this is also very simple as the special character for word boundaries, \b, is found before the first character of the word and after the preceding character. Thus, we can simply replace the \w with [a-zA-Z]. This matches all Latin characters while \D will match a non-digit character (which must be letter after a word boundary).

To find the length of a string, we can eliminate all white spaces in the last step and count the length of the resulting string.

Conclusion

The complete source code of the command can be found in our library. For instructions on how to incorporate it into your Dreamweaver program, you should refer to the preceding column.

As you can see, it's rather simple to take advantage of an open system like Dreamweaver because it uses a lot of standards you probably already know. You only have to learn about the basic framework and the custom APIs used.

While today's lesson was fairly simple, we'll talk about the file I/O APIs next time so that you can access the files of your site. We'll also show you how to create a full-featured, tree-view menu object with just a few lines of code. Stay tuned!

Claus Augusti is O'Reilly Network's JavaScript editor.

Read more Essential JavaScript columns.

Return to the JavaScript and CSS DevCenter.