Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

adjust/replace content based on tag and ClassName ?

Posted on 2008-06-26
5
Medium Priority
?
608 Views
Last Modified: 2012-05-05
I need to strip out targeted content based on the surrounding tags and the classname. The tags/class I need to look for and the content I need to adjust is as follows:
Example1 content before adjustment:
<td class="tblheader"><span>Some Name: Add New Catalog Record</span></td>
Example1 content after adjustment [what the web user should perceive]:
<td class="tblheader"><span>Add New Catalog Record</span></td> //i.e., stripped out "Some Name"
Example2 content before adjustment:
<td class="tblheader"><span>Some Name: Add New Item Record</span></td>
Example2 content after adjustment [what the web user should perceive]:
<td class="tblheader"><span>Add New Item Record</span></td>
Unfortunately, no such thing as this:
document.getElementByClassName("tblheader").innerHTML.replace...  
How can I adjust the content by class name? Possible?
Please provide javascript code. Thanks!
0
Comment
Question by:GessWurker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 11

Expert Comment

by:asafadis
ID: 21875245
If you use a Javascript library such as jQuery, you can do something as simple as:

$("td, .tblheader").html("customContent");

Otherwise, it would depend on whether the "class" in question is going to be assigned to more than one tag type.  

Check it out...



<script type="text/javascript">
 
/**
  * If you're going to assign the CLASS to just one tag type (in this case
  * it looks like you're just interested in <td>).  You can do something
  * like this:
  */
 
var tags = document.getElementsByTagName('td');
 
for(var i=0; i<tags.length; i++) {
    if(tags[i].className == 'targetClass') tags[i].innerHTML.replace...;
}
 
 
/**
  * On the other hand, if you're going to assign your "targetClass" to more than
  * one tag, you can use Robert Nyman's "ultimate getElementsByClassName"
  * (http://www.robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/).
  * It works perfectly everywhere.
  * Then you would do something like this:
  */
 
var classes = getElementsByClassName(document, "*", "info-links");
 
for(var i=0; i<classes.length; i++) {
    classes[i].innerHTML.replace...;
}
 
</script>
 
/**
 * One last note:
 * I'm not sure what it is you're trying to do.  But if you want to identify
 * certain cells as 'headers', you can also use the 'thead' and 'th' tags.
 *
 * This way you can search for 'th' inside 'thead', without having to assign a class.
 */
 
<table>
    <thead>
        <tr>
            <th>Column Header 1</th>
            <th>Column Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Column1</td>
            <td>Row 1 Column2</td>
        </tr>
        <tr>
            <td>Row 2 Column1</td>
            <td>Row 2 Column2</td>
        </tr>
        <tr>
            <td>Row 3 Column1</td>
            <td>Row 3 Column2</td>
        </tr>
    </tbody>
</table>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 21879504
function searchAndReplace(theTagname, theClass, theContent)
{
 var tags = document.getElementsByTagName(theTagName);
 for(var i=0; i < tags.length; ++i)
 {
  if( tags[i].className.indexOf(theClass) > -1 )
  {
    tags[i].innerHTML = theContent;
  }
 }
}

searchAndReplace("td","tblheader","<span>Add New Catalog Record</span>")
0
 

Author Comment

by:GessWurker
ID: 21880442
hielo: This looks good. But one thing: I need the function to work more broadly. Ideally, we only remove "Some Name: " from the content between the <span> tags, and retain what follows "Some Name: "  Your suggestion is only good for Example 1 in my opening question. I need something that would work with both Examples 1 and 2.
0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 21880536
Try
function searchAndReplace(theTagname, theClass, searchFor,replaceWith)
{
 var tags = document.getElementsByTagName(theTagName);
 for(var i=0; i < tags.length; ++i)
 {
  if( tags[i].className.indexOf(theClass) > -1 )
  {
    tags[i].innerHTML = tags[i].innerHTML.replace(searchFor,replaceWith);
  }
 }
}
 
searchAndReplace("td","tblheader","Some Name: ","")

Open in new window

0
 

Author Comment

by:GessWurker
ID: 21933512
Thanks Hielo. Sorry for the delay!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question