dksvertix Posted June 26, 2016 Share Posted June 26, 2016 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. Link to comment Share on other sites More sharing options...
Ingolme Posted June 26, 2016 Share Posted June 26, 2016 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."); } 1 Link to comment Share on other sites More sharing options...
dksvertix Posted June 26, 2016 Author Share Posted June 26, 2016 I knew it, it will be slightly complex, but it is doable. Thank you Foxy. Link to comment Share on other sites More sharing options...
davej Posted June 26, 2016 Share Posted June 26, 2016 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. Link to comment Share on other sites More sharing options...
dksvertix Posted June 27, 2016 Author Share Posted June 27, 2016 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? Link to comment Share on other sites More sharing options...
davej Posted June 27, 2016 Share Posted June 27, 2016 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. Link to comment Share on other sites More sharing options...
Ingolme Posted June 27, 2016 Share Posted June 27, 2016 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. 1 Link to comment Share on other sites More sharing options...
dksvertix Posted September 6, 2016 Author Share Posted September 6, 2016 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. Link to comment Share on other sites More sharing options...
Ingolme Posted September 6, 2016 Share Posted September 6, 2016 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] ); 1 Link to comment Share on other sites More sharing options...
dksvertix Posted September 10, 2016 Author Share Posted September 10, 2016 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now