[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 611
  • Last Modified:

adjust/replace content based on tag and ClassName ?

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
GessWurker
Asked:
GessWurker
  • 2
  • 2
1 Solution
 
asafadisCommented:
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
 
hieloCommented:
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
 
GessWurkerAuthor Commented:
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
 
hieloCommented:
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
 
GessWurkerAuthor Commented:
Thanks Hielo. Sorry for the delay!
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now