javascript regex to replace url of certain length with

Question

I want a regex which will replace the long url with ..., for example,

I pass in a string with url in it, i.e

<a href="http://www.abc.com/thisSite/myPages/blah-blah-blah.aspx">http://www.abc.com/thisSite/myPages/blah-blah-blah.aspx</a>

should be converted to

<a href="http://www.abc.com/thisSite/myPages/blah-blah-blah.aspx">http://www.abc.com/th....</a>

any help would be appriciated.

You can post HTML as text by indenting it 4 spaces, thus making it "code" or "preformatted". There's also a button in the mini-editor that will indent a selected block of lines 4 spaces (the one with label 1010101) — Jim Garrison
– Jim Garrison, Commented Aug 24, 2010 at 3:12
are you using any library (i.g. JQuery, etc.) ? Are you generating the HTML from a server script (i.g. PHP) ? It would be best if this was solved from the serving script itself, unless you're getting the URLs from an Ajax call, thus the library... — Yanick Rochon
– Yanick Rochon, Commented Aug 24, 2010 at 3:23
No I am getting the content from a service call, and generating HTML in javaScript .. so it can't be done in the server ... :( — alittlebitofday
– alittlebitofday, Commented Aug 24, 2010 at 3:26
are you retrieving the content from the service call as HTML directly, or is it an XML that you are parsing, or a JSON from which you create your anchor tags with? — Yanick Rochon
– Yanick Rochon, Commented Aug 24, 2010 at 3:35

robotdana · Accepted Answer · 2010-08-24 04:31:15Z

1

Jquery

$('a').each(function(){
   var text = $(this).text();
   if (text.length > 20 && text.substr(0,7) == "http://"){ // it looks like a URL and it's long
      text = text.substr(0,20) + '&hellip;';
      $(this).text(text);
   }

});

normal javascript

var links = document.getElementsByTagName('a');
for (var i = 0;i=links.length-1;i++) {
   var text = links[i].innerHTML;
   if (text.length > 20 && text.substr(0,7) == "http://"){ // it looks like a URL and it's long
      text = text.substr(0,20) + '&hellip;';
      links[i].innerHTML = text;
   }
}

I have no idea if this works or not as I wrote it from my head. have fun.

edited Aug 24, 2010 at 4:31

answered Aug 24, 2010 at 3:43

robotdana

5324 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Rowe Over a year ago

fyi: as is a reserved word. You'll need to change that.

Community · Accepted Answer · 2017-05-23 12:26:47Z

1

Based on this solution, here is what you could do :

String.prototype.trunc =
     function(n,useWordBoundary,wordChar){
         if (!wordChar) wordChar = ' ';
         var toLong = this.length>n,
             s_ = toLong ? this.substr(0,n-1) : this;
         s_ = useWordBoundary && toLong ? s_.substr(0,s_.lastIndexOf(wordChar)) : s_;
         return toLong ? s_ + '&hellip;' : s_;
     };

Then simply apply this to anchors displaying links :

var maxLength = 40;
var aElements = document.getElementsByTagName('a'), _text, _param;
var aLen = aElements.length;

for (var i=0; i<aLen; i++) {
   _text = aElements[i].innerHTML;
   // remove url params
   if (0 <= (_param = _text.indexOf('?'))) {
      _text = _text.substr(0, _param - 1);
   }
   if (0 == _text.indexOf('http://') && _text.length > maxLength) {
      _text = _text.trunc(maxLength);
      // _text = _text.trunc(maxLength, true, '/'); 
   }
   aElements[i].innerHTML = _text;
}

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 24, 2010 at 4:04

Yanick Rochon

53.8k30 gold badges146 silver badges231 bronze badges

2 Comments

strager Over a year ago

I'd say don't bother with URL parameters, etc.; just truncate the text node with trunc.

Yanick Rochon Over a year ago

it's just prettier to the end user not to see URL params... but then again, they may be needed / required. In any case, the IF block can simply be commented (or conditional to another parameter...)

Ben Rowe · Accepted Answer · 2010-08-24 03:35:13Z

0

You'll need to use the following bit of code

<script>
var cutOffAt = 20;
var anchorRef = getAnchorFromDom();
var text = anchorRef.innerHtml;
if(text.length > 20) {
  anchorRef.innerHtml = text.substr(0, cutOffAt);
}

function getAnchorFromDom()
{
  // provide your own logic here
  return document.getElementsByTagName('a')[0];
}
</script>

Untested.

answered Aug 24, 2010 at 3:35

Ben Rowe

28.8k6 gold badges58 silver badges76 bronze badges

Comments

Scott Evernden · Accepted Answer · 2010-08-27 04:36:42Z

0

And Here i was thinking you actually wanted to use a regexp and never mentioned jquery .. headslap ...

var s = '<a href="http://www.abc.com/thisSite/myPages/blah-blah-blah.aspx">http://www.abc.com/thisSite/myPages/blah-blah-blah.aspx</a>';
var t = s.replace(/(<a [^>]*>)([^<]{1,20})([^<]*)(<\/a>)/, function(str, p1, p2, p3, p4) { return p1 + p2 + (p3.length ? '...' : '') + p4; });
document.write(t);

http://jsfiddle.net/5kSzL/

edited Aug 27, 2010 at 4:36

answered Aug 24, 2010 at 4:53

Scott Evernden

40.1k15 gold badges81 silver badges84 bronze badges

Collectives™ on Stack Overflow

javascript regex to replace url of certain length with

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related