Question

I’m trying to replace every instance of “Administrator” on my page with “Admin” Or something similar to that. How would I replace that? If it helps, the span is inside an tag that has the class “user-title”.
Like this page but I kinda need to be fed the answer. This is my first time working with javascript.

<ul class="author-ident"> 
    <li class="username">
        <a title="Go to Different55's profile" href="http://fwin.co.cc/pun/profile.php?id=2">Different55</a>
    </li> 
    <li class="usertitle">
        <span>Administrator</span>
    </li> 
    <li class="userstatus">
        <span>Online</span>
    </li> 
</ul>

Answer 1

I work mostly with JQuery so I can only give you a JQuery solution of the top of my head. Sorry if this is not an option for you. With JQuery you could do this…

$(".user-title").each(function(index){
   $(this).html($(this).html().replace("Administrator", "Admin"));
});

NOTE: If you expect more than one instance of “Administrator” per span tag then you will need to do a regex replace like follows…

.replace(/Administrator/g, "Admin");

See this for more info on the regex flag (e.g. “g” means global – more than one)

EDIT: Here is a javascript version….

var spans = document.getElementsByClassName("user-title");
for (var i = 0; i < spans.length; i++)
{
  spans[i].innerHTML = spans[i].innerHTML.replace(/Administrator/g, "Admin");
}

ANSWER: This is based on your provided sample HTML (note that I have changed the class name “usertitle” based on your html, check if this is correct)…

var parents = document.getElementsByClassName("usertitle");
for (var i = 0; i < parents.length; i++)
{
    var spans = parents[i].getElementsByTagName("span");
    for(var j = 0; j < spans.length; j++){
        spans[j].innerHTML = spans[j].innerHTML.replace(/Administrator/g, "Admin");
    }
}

The JQuery equivalent…

$(".usertitle span").each(function(index){
   $(this).html($(this).html().replace("Administrator", "Admin"));
});