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

Hi,

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

bla bla bla abcdefghijklmnopqrstabcd

will be:

Expand|Select|Wrap|Line Numbers

bla bla bla abcd</wbr>efgh</wbr>ijkl</wbr> ....

What is the syntax for string.replace(regex, str) I should use?

Thanks

Sep 7 '07 #1

Subscribe Post Reply

6319

gits

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

 // we want linebreaks after 5 chars for the 

// following text

var text = 'abcd efg hij klmn opqrs tx';
 
// we will match 5 chars with the following regEx

// AND the rest :) that we might split again

var re = /(^.{0,5})(.{0,})/;
 
// the next will be a list of substrings

var text_items = [];
 
// one item

var text_item  = null;
 
// now we 'explode' the text

var explode = function(t) {

    var expl_txt = t.match(re);

    text_item = expl_txt[1];

    text = expl_txt[2];

};
 
explode(text);
 
while (text_item != '') {

    text_items.push(text_item);

    explode(text);

}
 
// join the listitems with desired string

var new_text = text_items.join('</wbr>');
 
alert(new_text);

kind regards

Sep 8 '07 #2

dolittle

hi,

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.

Thanks

Sep 10 '07 #3

gits

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

dolittle

Hi,

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

 var str = 'ThisStringIsTooLong and some normal words'

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

<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

 str = str.replace(/(?:<[^>]+>)|(.{10})/g,'$&<wbr/>');

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

prasadk14

Hi,

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

 function wordwrap(str, len) {

    len = len || 10;

    /* Regex to remove spaces before the start of any html tag */ 

    str = str.replace(/ +</g,'<');

    /* Regex to insert <wbr/> after every html tag or a text of 'len' characters 

    var re = new RegExp("(?:<[^>]+>)|([^<&]{0,"+len+"})","g");

    str = str.replace(re,'$&<wbr/>');

    str = str.replace(/><wbr\/>/g,'>');

    return str;

}

Thanks

Sep 5 '11 #6

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...

HTML / CSS

How to use translate() with HTML tags in string

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(.,'/',,'<wbr>/</wbr>') I don't know...

.NET Framework

Start <Div> at bottom of scroll

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...

C# / C Sharp

arraylist inside an arraylist for datagrid, gridview

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...

C# / C Sharp

Formated string or double?

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...

C# / C Sharp

Initialising array of struct KeyValuePair<TKey,TValue>

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>(...

C# / C Sharp

Delimited String to Array

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 - ...

C# / C Sharp

search and replace

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...

.NET Framework

How to wrap text in <p> tag if the text has no spaces and is verylong

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: ...

HTML / CSS

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

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

Similar topics