Read words on a webpage

[dksvertix]

Hi, newbie here, I want to achieve the following:

 

1. Read words on a webpage, one by one.
2. Check if the word exists as a declared variable.
3. If true, replace the word with call to a function.

 

I need ideas, pointers to materials, how to do the above without using any external add-ons.

[Ingolme]

You would need to do a tree traversal on the DOM, starting at document.body and using the childNodes and parentNode properties to move down and up the tree.

 

For each node, check the node type, if it's an element node, begin traversing its children, if it's a text node then split its nodeValue property into an array of words and loop through them checking to see if any of them exist as a property of the window object. If the property is found then call your function and assign its return value to the specified element in the array. Once done looping through the array join it back together and assign it back to the nodeValue property.

 

To check whether a property exists on the window a single if() statement will work:

var word = "something";
if(window[word]) {
  console.log("Property " + word + " exists in the global scope.");
}

[dksvertix]

I knew it, it will be slightly complex, but it is doable.

 

Thank you Foxy.

[davej]

 

3. If true, replace the word with call to a function.

 

I would have asked you for an example, because this idea makes little sense to me.

[dksvertix]

 

I would have asked you for an example, because this idea makes little sense to me.

 

I'm writing a book with integrated dictionary. Under number 3 I meant if word is defined (declared as variable), then replace the word with function call that displays a popup with word's definition. I don't think there's anything wrong with that?

[davej]

That's a little different. So maybe "dog" is replaced by <span class="lookup">dog</span> and the wrapper div for the entire page is set to call a click handler.

[Ingolme]

The nodeValue property will not allow you to put HTML into the page, only text, so you would actually have to modify the innerHTML property of the parent of the text node or split the text node into two and put an element node between them. This adds complications because text nodes may be next to element nodes, changing the innerHTML modifies the structure of the DOM. Both innerHTML and adding element nodes will affect the DOM and interfere with your tree traversal algorithm.

[dksvertix]

var word = "something";
if(window[word]) {
  console.log("Property " + word + " exists in the global scope.");
}

 

 

One thing that still haunts me: what exactly is

window[]

?

 

I want to explain this function for myself clearly, but I can't find any information about what it is exactly.

[Ingolme]

window is the root object, the global scope.

 

Any time you declare a variable in the global scope it becomes a property of the window. Properties can be accessed either by dot notation ( window.alert ) or by square brackets ( window["alert"] ). The advantage of square brackets is that you can use variables as property names:

var f = "alert";
console.log( window[f] );

[dksvertix]

 

window is the root object, the global scope.

 

Any time you declare a variable in the global scope it becomes a property of the window. Properties can be accessed either by dot notation ( window.alert ) or by square brackets ( window["alert"] ). The advantage of square brackets is that you can use variables as property names:

var f = "alert";
console.log( window[f] );

 

Well explained. Thank you!