Solved

adjust/replace content based on tag and ClassName ?

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

706 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

17 Experts available now in Live!

Get 1:1 Help Now