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
Solved

adjust/replace content based on tag and ClassName ?

Posted on 2008-06-26
5
601 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
  • 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

Title # Comments Views Activity
100% tall div not scrollable on iPhone 3 20
Filktering Alphabetically 8 29
Start Auto-download of File when page loads? 1 20
on window close, not beforeunload 6 17
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

809 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