473,221 Members | 2,321 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,221 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 6289
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

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

Similar topics

by: RBalbat | last post by:
Hello all, I have encountered an unexpected problem where if I render a table (in IE or Opera) and there are cells that contains URLs with long query strings, even though I specify the table...
by: johkar | last post by:
I have a rather long unbroke string (a URL) which I would like to break at certain points using XSL. I can't seem to get translate() to work: translate(.,'/',,'&lt;wbr>/&lt;/wbr>') I don't know...
by: Ben | last post by:
I Have a datagrid that i have placed inside a <div> section so that it becomes scrollable, but now i have a new problem. I would like the <div> to auto start at the bottom of the scroll (newest...
by: rjl | last post by:
Is there a way to assign an arraylist inside an arraylist as a column? i have arrayList list, which has 2 Strings and an arrayList with 3 values. I would like the following columns then in a...
by: bojan.pikl | last post by:
Hi, I am making a calculator. I have a double wich I am parsing to string and writing to label. How could I make that double or string would be only 14 length + space for negative sign (-). So I...
by: Russell Hind | last post by:
I want to create an array of key value pairs. This code compiles fine: KeyValuePair<string, object> kvps = { new KeyValuePair<string,object>( "int", 5 ), new KeyValuePair<string,object>(...
by: Kyro | last post by:
New to C# (migrating from Delphi) and I'm not sure how to get a delimited string into an array of string. input: string looks like - 01-85-78-15-Q11 output: an array with elements - ...
by: foolproofplan | last post by:
Hey everyone. I am running into a problem with unique ids that need to be compared in two xml files. The actual object name is represented with its unique id later in the xml file, so i need to do...
by: removeps-groups | last post by:
How to wrap text in <ptag if the text has no spaces and is very long? Here is an example: ...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.