Wrap text after perticular symbol with jQuery

Question

Hi all,

What im trying to do, is wrap text into div inside ll tag. It wouldn't be a problem, but i need to wrap text that appears particularity after "-" (minus) including "minus" itself

THis is my html

<ul>
    <li>Some list text - Additional text</li>
</ul>

As I result im trying to achieve this:

<ul>
     <li>Some list text <span class="after">- Additional text<span></li>
</ul>

Will anyone will be able to help me please?

Thank you in advance

Answer 1

Sounds like you're on track. Make the span a block-level element like so:

<span class='after' style='display: block;'>...</span>

And see if that does it.

Oh, and then move that inline style into your stylesheet :)

Answer 2

This will insert a linebreak before every - in a list item.

$(function(){
  $("li").each(function(){
    $(this).html($(this).html().replace(\-\, "<br />-"));
  });
});

Answer 3

It looks like you are trying to create some sort of descriptive list instead of a simple unordered list. If you need to keep all the text within a single element I'm sure someone will post a decent solution, but why not use a dl instead of a ul like so:

 <dl>
      <dt>Some list text</dt>
      <dd>- additional text</dd>
 <dl>

This should achieve the same effect as trying to cause the text after a "-" sign to appear on a new line, and you can modify the padding and margin on the <dt> and <dl> elements so that they line up if that is the look you are going for. If you are creating a descriptive list with list items (<dt>) with further sub list items describing them (<dd>) its better to imply that in the semantics for accessibility than to approximate the same thing using another method.

EDIT: Before anyone says anything I am aware that the question asked for a solution using jQuery, and that this solution doesn't use jQuery. But if the intent here is to approximate a descriptive list it's better to code that semantically in the HTML than use jQuery magic.

Answer 4

Something like this below should do it, note this was dry-coded here in my browser, so testing is required.

$('ul li').each(function() {
    var parts = $(this).html().split('-', 1);

    $(this).html(parts[0]);
    if (parts.length == 2) {
        $(this).append(" - " + parts[1]);
    }    
});

Answer 5

$.each($("li:contains('-')"),function(i,n){
  n.innerHTML = n.innerHTML.replace('-','<span class="after">-')+"</span>"
});

Answer 6

Something like this should do it.

$('li').each(function() {
  $(this).html($(this).text().replace(/-.*$/, '<span class="after">$&</span>'));
});