Solved

adjust/replace content based on tag and ClassName ?

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

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 …
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-…
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…

895 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now