Use jquery to split a string to new line break at certain character

Question

Currently, the string is

Package A (123 queries) Package B (212 queries)

Is it possible to use jquery to split it into new line like

Package A (123 queries)

Package B (212 queries)

I was thinking to insert line break after each closing bracket. But not sure if it is appropriate.

Edit 1

In HTML

<ul class="list">
    <li><span id="requested-package">@Model[0].regDescription[a]</span></li>
    <li>Testing</li>
</ul>

Output - I want to make the Plan A in next line

Edit 2

    var str = $('.hidden-package').text();
    var line = str.replace(')', ') <br>');
    $('.requested-package').html(line);

Current Output

I created a hidden field hidden-packageand from there I managed to get the text value using .text(). The problem now is it only replaces the first occurrence of closing bracket. How can I replace all the closing bracket with <br>. Thanks.

Solution

Managed to solve this by changing the code above to the below.

    var str = $('.hidden-package').text();
    var line = str.replace(/\)/g, ')<br>');
    $('.requested-package').html(line);

If it's just a "string", then no - use javascript, not jquery - jquery is for DOM manipulation. — fdomn-m
– fdomn-m, Commented Nov 18, 2016 at 10:47

Shaun Parsons · Accepted Answer · 2016-11-18 10:54:46Z

3

Use .replace but try to be as specific as possible. Here we look for where you have a closing bracket followed by a space followed by 'Package' followed by another space ') Package '. This should help prevent erroneous results

'Package A (123 queries) Package B (212 queries)'.replace(') Package ', ')\nPackage')

answered Nov 18, 2016 at 10:54

Shaun Parsons

3622 silver badges11 bronze badges

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

1 Comment

jenna_3108 Over a year ago

Hi Shaun. Thank you for the solution. I managed to replace it with a new line but I used <br> instead. However, it only replaces the first occurrence of ). Any idea how to solve it?

xiaoyu2er · Accepted Answer · 2016-11-18 10:52:19Z

2

'Package A (123 queries) Package B (212 queries)'.replace(') ', ')\n')

answered Nov 18, 2016 at 10:52

xiaoyu2er

1666 bronze badges

4 Comments

jenna_3108 Over a year ago

Thank you for the solution. I managed to replace it with a new line but I used <br> instead. However, it only replaces the first occurrence of ). Any idea how to solve it?

xiaoyu2er Over a year ago

You can give me the whole string and the ideal result.

jenna_3108 Over a year ago

I have edited my post above mentioned in Edit 2 :) thanks

xiaoyu2er Over a year ago

great flag 'g' can replace all matched content :D

user2703788 · Accepted Answer · 2016-11-18 11:10:35Z

1

Add any special character where you want to split the string and replace it with a line break, this should add a new line in html.

For example

var string = "Package A (123 queries)~Package B (212 queries)~Package C (212 queries)";
string = string .replace(/~/g, "<br />");

answered Nov 18, 2016 at 11:10

user2703788

1631 silver badge16 bronze badges

1 Comment

jenna_3108 Over a year ago

I have edited my post above, I'm now facing problems to replace every occurrences of ) instead of only the first one. Any idea how to solve it? Thanks.

wsrt · Accepted Answer · 2022-10-12 08:30:47Z

0

I needed to convert contents of the variable someStr to string using toString() function:

So if my string looks like this:

someStr = 'Package A (123 queries)~ Package B (212 queries)' with the special character "~" inserted (as suggested by @user2703788), convert the variable someStr as:

someStr = someStr.toString(); And then replace

So we may use:

someStr = someStr.toString().replace(/~/g, "<br />");

And display the contents:

$('#myMessage').html(someStr);

answered Oct 12, 2022 at 8:30

wsrt

2212 silver badges11 bronze badges

Collectives™ on Stack Overflow

Use jquery to split a string to new line break at certain character

4 Answers 4

1 Comment

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related