471,853 Members | 1,726 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,853 software developers and data experts.

use string.replace with regex to insert <wbr> tags inside a long string


I have a user text. Some of the strings in the text could be longer than my display so I thought of using string.replace with regex to insert <wbr> tags after a fixed number of characters. For example:

Expand|Select|Wrap|Line Numbers
  1. bla bla bla abcdefghijklmnopqrstabcd
will be:

Expand|Select|Wrap|Line Numbers
  1. bla bla bla abcd</wbr>efgh</wbr>ijkl</wbr> ....
What is the syntax for string.replace(regex, str) I should use?

Sep 7 '07 #1
5 6102
5,390 Expert Mod 4TB
hi ...

welcome to TSDN ...

its a little bit trickier then you might think ;) ... let me show you an example and i commented the code inside there ...

Expand|Select|Wrap|Line Numbers
  1. // we want linebreaks after 5 chars for the 
  2. // following text
  3. var text = 'abcd efg hij klmn opqrs tx';
  5. // we will match 5 chars with the following regEx
  6. // AND the rest :) that we might split again
  7. var re = /(^.{0,5})(.{0,})/;
  9. // the next will be a list of substrings
  10. var text_items = [];
  12. // one item
  13. var text_item  = null;
  15. // now we 'explode' the text
  16. var explode = function(t) {
  17.     var expl_txt = t.match(re);
  18.     text_item = expl_txt[1];
  19.     text = expl_txt[2];
  20. };
  22. explode(text);
  24. while (text_item != '') {
  25.     text_items.push(text_item);
  26.     explode(text);
  27. }
  29. // join the listitems with desired string
  30. var new_text = text_items.join('</wbr>');
  32. alert(new_text);
kind regards
Sep 8 '07 #2

Your code helped me allot. I now understand better regular expressions and gorups.

I`ve found a function elsewhere that does the same and I`m investigating the differences. http://snippets.dzone.com/posts/show/869
I`m not sure which one is supposed to be faster.

Sep 10 '07 #3
5,390 Expert Mod 4TB
hi ...

try it and in case you find out something ... please post it here ... would be interesting to know ;) ...

kind regards
Sep 10 '07 #4

I`m back with some news.

apparently my initial goal was rather easy to accomplish. By playing with your code I realized I can get it with just one line.

This code will insert </wbr> tag to break words longer then 10 characters. It won`t count spaces and line breaks because the browsers deals with them automatically.

Expand|Select|Wrap|Line Numbers
  1. var str = 'ThisStringIsTooLong and some normal words'
  2. str.replace([/S]{10},'$&</wbr> ';
Then I faced another problem. In my application I`m replacing links with <a> tags. If the link text is longer then 10 characters I`ll break it. So I need a regex that will break the text of the link but not the address inside the <a>. For example:

Expand|Select|Wrap|Line Numbers
  1. <a href="http://www.example.com">http://www<wbr/>.example.c<wbr/>om<a/>
The next code will do it:

Expand|Select|Wrap|Line Numbers
  1. str = str.replace(/(?:<[^>]+>)|(.{10})/g,'$&<wbr/>');
  2. str = str.replace(/><wbr\/>/,'>');
The second line will remove unwanted <wbr/> that will appear after each html tag.
It`s important to note that all the < and > characters in the normal text are escaped in a previous stage.
Thanks for you help guys.
Sep 12 '07 #5

Thanks for your code.

I have modified it a bit to make it work in some special cases.

Posting the modified code below -

Expand|Select|Wrap|Line Numbers
  1. function wordwrap(str, len) {
  2.     len = len || 10;
  3.     /* Regex to remove spaces before the start of any html tag */ 
  4.     str = str.replace(/ +</g,'<');
  5.     /* Regex to insert <wbr/> after every html tag or a text of 'len' characters 
  6.     var re = new RegExp("(?:<[^>]+>)|([^<&]{0,"+len+"})","g");
  7.     str = str.replace(re,'$&<wbr/>');
  8.     str = str.replace(/><wbr\/>/g,'>');
  9.     return str;
  10. }
Sep 5 '11 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Ben | last post: by
7 posts views Thread by bojan.pikl | last post: by
18 posts views Thread by Kyro | last post: by
5 posts views Thread by foolproofplan | last post: by
reply views Thread by YellowAndGreen | last post: by
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.