Javascript truncate string at 25 characters?

Hi,

I need to truncate a link's text if it's longer than 25 characters, it needs to be a simple javascript solution.
Server side, I've wrapped the link's anchor text in a <span id="truncate"> if it's longer than 25 characters, so the javascript can do the rest.
But what JS can I use for this? I've tried a few things I've found by Googling, but they seem over complex and none worked.

Thanks.
LVL 6
i-CONICAAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Hello i-CONICA,

Use : substr(0, length)

http://www.w3schools.com/jsref/jsref_substr.asp

So in your case : var myStr = myStr.substr(0,25);

Regards.
0
i-CONICAAuthor Commented:
Hi, Thanks.

I've no idea how to implement this, could you provide an example?

Thanks.
0
ZylochCommented:
First, you need to change the id="truncate" to class="truncate". Every element with an id must have a unique id, while this is not true for class.
 
 Second, if you are going to mark these special links by enclosing them in a span tag, you should make sure that the span tag is outside of the link. This just makes the truncation easier to handle.
 
 Conditional on these two factors, the following sample code should give you an idea. Note that we need to call this truncation function only after the entire page is loaded; hence, the function call is included in the window.onload section.

Finally, I will remark that there are other ways that come to mind of doing this that don't require a span tag generated by the server (i.e. automatically prune all links that are too long). They even don't require much modification to the code. Let us know if that is your preference.

For completeness, I will mention that if you are already using a JavaScript library, part of the code that loops through and looks for all the span tags and the a tag inside them can likely be simplified.


<html>
<head>
<script type="text/javascript">

function truncLink() {
   var trunc = document.getElementsByTagName("span");
   for (var i = 0; i < trunc.length; i++) {
      if (trunc[i].className.indexOf("truncate") !== -1) {
         // avoid DOM differences between IE and others
         var lnk = trunc[i].getElementsByTagName("a")[0];
         lnk.innerHTML = lnk.innerHTML.substr(0,25);
      }
   }
}

window.onload = function() {
   truncLink();
};

</script>
</head>
<body>
<a href="http://www.google.com/">Short Link</a>
<span class="truncate"><a href="http://www.yahoo.com/">This is an extremely long link to Yahoo!</a></span>
<span class="truncate"><a href="http://www.google.com/">This long link is to Google. Blah blah blah 

blah.</a></span>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
i-CONICAAuthor Commented:
Thank you very much.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.