Solved

adjust/replace content based on tag and ClassName ?

Posted on 2008-06-26
5
604 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 500 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

688 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