Working with strings using script

Topic status automatically displays here - do not remove.

Bookmark this topic  Print this topic

By Colin Ramsden, March 2008.

Using JavaScript, string manipulation enables you to examine every character in an HTML document, including the source tags and their properties.

For example, consider the following HTML snippet:

<div class="bordered" id="ExampleDiv">
<p class="txt">It's about time, It's about space, 
About strange people in the strangest place. </p>

<p class="txt">It's about time, It's about flight, 
Travelin' faster than the speed of light. </p>

<p class="txt">About Space People And A Brave Crew, 
As Through The Barrier Of Time They Flew. </p>
</div>

This example consists of text in three paragraphs (p) contained within a division (div). The 'div' is styled with a class and identified with an ID, and each 'p' has a style class assigned. The ID and the styles aren't of concern in this example, and are only provided to demonstrate how these HTML element attributes are able to be handled when using string scripting.

It displays like this:

The whole div and its HTML contents can be accessed by script through the HTML Document Object Model (DOM) provided by the browser agent at runtime (when the document is being displayed). The DOM contains both a hierarchical (tree-like) listing of all HTML elements within the document, as well as a collection of document element objects. For an explanation of the HTML DOM, see [W3C Schools].

In JavaScript, the previous example can be accessed directly by retrieving a link to that particular div object through its ID:

var divExample = document.getElementByID["ExampleDiv"];

The variable named "divExample" contains a link to the document element "ExampleDiv". (We could have named them anything we wanted, but for sake of clarity, it's better to name such things in a logical manner.) Providing there is only one element in the document with that ID—making it a unique ID—the reference is linked to that exact object. (If more than one element in the document contains the identical ID, then the first object encountered with this ID in the HTML tree is returned by the 'getElementByID' method.)

Once we have a reference to an object, we can examine its contents and properties using script. For example, we can query it to determine its ID:

alert(divExample.id);

 Click the button to see this script in action.

Many other properties are accessible using script, such as the applied style (class), inner HTML (innerHTML), and in Microsoft Internet Explorer (IE) inner text (innerText) and outer HTML (outerHTML):

You can change the content of an element by changing its value. Try the following example which alters the text displayed in the third paragraph of the primary example above. Note that you can't directly edit the text in the third example paragraph above. It is changed by the content of the following box and the script attached to the following button:

 

INSTRUCTIONS: Click in the text box above, edit its content, and then click the 'Update' button. View the results in the example paragraph displayed further up the page. ( Scroll back up the page to view the example text.)

The script behind the button contains the following:

var divExample = document.getElementById("ExampleDiv");
var aryParas = divExample.getElementsByTagName("p"); 
var divContent = aryParas[2];
var txtUpdate = document.getElementById("tbxEditable");
divContent.innerHTML = "[Edited] " + txtUpdate.value;

Microsoft have provided additional methods such as innerText and outerHTML.

The innerHTML method of a parent object returns the tagged HTML content of its sublings, however the innerHTML method of a end sibling or child object returns the inner text content of the object without wrapping tags.

The trick when working with strings and browsers is that IE supports custom methods which FF does not.

The methods to use are parentNode, firstChild and lastChild.

Note that FF sees linebreaks or Carriage Returns in the string which IE does not when writing to an element.

 

In script, this can be achieved with a function which receives a reference to the element, retrieves the text content from the element storing it locally as a string, divides the string into the number of columns, and returns the substrings for each column to the destination. For example:

function nDivideIntoCols(elSrcID, elDestIDx, NumCols)
{
   var v, vSrc, vCount, vDest;
   aryDest = new Array();
.  aryCols = new Array();

   vSrc = document.getElementsByID[elSrcID];
   vCount.Total = vSrc.innerText.length;
   vCount.CharsPerCol = vCount.Total/NumCols;

   for(v=1; v<NumCols; v++)
   {
      //store the ideal position for the column break
      aryCols[v].IdealPos = v * vCount.CharsPerCol;
      //search around the ideal position for the space char
      aryCols[v].PostPos = vSrc.innerText.indexOf(" ", aryCols[v].IdealPos);
      aryCols[v].PrevPos = vSrc.innerText.lastIndexOf(" ", aryCols[v].IdealPos);
      //compare search results to determine closest space to ideal position
      if((aryCols[v].IdealPos-aryCols[v].PrevPos)<(aryCols[v].PostPos-aryCols[v].IdealPos))
      {
         //break at PrevPos
         aryCols[v].BreakPos = arCols[v].PrevPos;
      }
      else
      {
         //break at PostPos
         aryCols[v].BreakPos = arCols[v].PostPos;
      }

   }

   //breakup the string
   aryDest[v].Content = vSrc.innerText.slice(1, aryCols[v].BreakPos);
}

Further refinement would take a larger block of content and parse the string to determine the extent of the divisible areas, setting flags to indicate the extent of what's required.

 

 

 

 

Who am I? > find out more