Search Span for specific text, display div if present
|
|
I'm trying to search a span (class="reason") for 1 or 2 specific text strings ("example", "two worder") and then if either or both are present display a div. If any of those words are not present then the div remains hidden. The div is not present on the page as is, that needs to be inserted with the script as well. |
|
|
spans = document.evaluate("//span[contains(@class, 'reason')]", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
/* creates a reference for all spans with className reason */
for (i = 0; i < spans.snapshotLength; i++) { /*creates a loop for all of the matched elements */
if (/example|two worder/.test(spans.snapshotItem(i).textContent)) { /* tests the two strings on the content of the span*/
newDiv = document.createElement(''div); //creates a div if true
newDiv.appendChild(document.createTextNode('duuuude. expression matched.')); //puts text in the div
document.getElementById('the parent id of the element you want to put the div in').appendChild(newDiv); //places the div somewhere on the page
}
}
...or something like that untested. |
|
|
Thanks for the reply RunningBlind, but I wasn't able to make it work. Here's a broader description of what I'm trying to do. I want to scan a page for these key words located in 'reason' class. If those words are present I want a div to fade in (using a remote javascript) covering the whole screen. I want to say the reason the warning is there (which of the key words it matched) and then I want the user to be able to click a link to rehide the div. |
|
|
I think your first explanation was clear enough. What would really help would be a better explanation of why RunningBlind's piece didn't work for you. I tried modifying it a litte to add the reason message and a close link, but RunningBlind's code seems to me to be working, so maybe there's another problem.
var spans=document.evaluate("//span[contains(@class,'reason') and contains(.,'example')]",document, null,6,null);
var morespans=document.evaluate("//span[contains(@class,'reason') and contains(.,'two worder')]",document,null,6,null);
if(spans.snapshotLength>0&&morespans.snapshotLength>0){var message='duuuude. both expressions matched.';}
else if(spans.snapshotLength>0){var message='duuuude. example expression matched.';}
else if(morespans.snapshotLength>0){var message='duuuude. two worder expression matched.';}
if(message){
var newDiv=document.createElement('div');
newDiv.appendChild(document.createTextNode(message));
document.body.appendChild(newDiv);
var closeLink=document.createElement('a');
closeLink.appendChild(document.createTextNode('close'));
newDiv.appendChild(closeLink);
newDiv.addEventListener('click',function(){this.parentNode.style.display='none';},false);
}
(also removed for loop) |
|
|
I don't know why the previous one wasn't working... yours, however, is working... Thanks alot, this will give me a great start on this project I'm working on. |
|
|
How can I make that inserted div have a specific class name or id? |
|
|
Here are a few lines for context, with the appropriate line added:
-Joel |
