Use prototype javascript library : string manipulation in WRT application

From Forum Nokia Wiki

Reviewer Approved

Introduction

As you may know, Prototype is a famous cross-Web-Browser javascript library. It supports almost all current popular web browsers, such as FireFox, Safari, IE, Opera, etc. With the latest version(Prototype 1.6.0), it also supports AppleWebKit, an open source web engine provided by Apple Inc.

The Nokia Web Browser is built upon S60WebKit, a port of the open source WebKit project to the S60 platform. Nokia WRT(Web-RunTime) is based on it.

This section will show you how to manipulate string using prototype library.

String manipulation -- using String class

The String class in prototype.js library has many useful methods. Here is a method list of this class:

blank, camelize, capitalize, dasherize, empty, endsWith, escapeHTML, evalJSON, evalScripts, extractScripts, gsub, include, inspect, interpolate, isJSON, parseQuery, scan, startsWith, strip, stripScripts, stripTags, sub, succ, times, toArray, toJSON, toQueryParams, truncate, underscore, unescapeHTML, unfilterJSON

In the above list, the following functions will be tested in the example application.

gsub(pattern, replacement) -> string

Returns the string with every occurence of a given pattern replaced by either a regular string, the returned value of a function or a Template string. The pattern can be a string or a regular expression.

escapeHTML() -> string

Converts HTML special characters to their entity equivalents.

unescapeHTML() -> string

Strips tags and converts the entity forms of special HTML characters to their normal form.

For a full reference of String class, please go to http://www.prototypejs.org/api/string

There are several test cases in the example WRT application of this topic.

The first case is how to use gsub function simply with a regular expression.
The second one shows how to use gsub function with a callback function.
The third one shows how to generate formatted string in a template way -- using Template class.
The last one shows how to escape and unescape strings which contains HTML tags.

The example code of the first three test cases come from http://www.sergiopereira.com/articles/prototype.js.html#Strings, please go to there for more information.

Here I just make a few explanations on the test code of the last one. In the main HTML file of this example widget, there are two placeholders which are used to display the results generated by javascript code. The first one is used to show the original content in a string variable while the other one is used to show an escaped version of that variable. The related source code are shown below:

HTML Code:

<div id="aholder1">Holder1: <span id="holder1">This data will be replaced.</span></div>
<div id="aholder2">Holder2: <span id="holder2">This data will be replaced also.</span></div>

Javascript Code:

// test case: escapseHTML
function testEscapeHTML()
{
  var data = "<b>Hello, world!</b>";
 
  $('holder1').innerHTML = data;
  alert ($('holder1').innerHTML);
  $('holder2').innerHTML = data.escapeHTML();
  alert ($('holder2').innerHTML);
}
// test case: unescapseHTML
function testUnescapeHTML()
{
  var data1 = $('holder1').innerHTML;
  alert(data1.unescapeHTML());
  var data2 = $('holder2').innerHTML;
  alert(data2.unescapeHTML());
}

All test cases passed. You can test other methods of String class yourself.

The next topic will be Object Creation.

Download Sample

Download sample wiget of this topic: File:PrototypeString.zip. To install it, just rename the suffix .zip to .wgz.

For the latest version, please go to http://code.google.com/p/prototypewrt/downloads/list

Related topcis

Use prototype javascript library : Summary in WRT application
Use prototype javascript library : basic operations (Utility fucntions, etc) in WRT application
Use prototype javascript library : string manipulation in WRT application
Use prototype javascript library : Object Creation in WRT application
Use prototype javascript library : Prototype UI in WRT application
Use prototype javascript library : Form and AJAX(JSON) in WRT application

References

Prototype javascript Home Page [1]
Use prototype [2]
Sample WRT applications Download [3]

Community: Wiki