replace number list with jquery

Question

I have a list written in HTML:

<p>
1 - hello
2 - yo
3 - sup
</p>

I want to replace the number [1-20] followed by the space[ ] followed by the hyphen[-] with "<p class='answer'>"using Jquery.

I believe it is something like this? (obviously inside the .find is just explaining what I am looking for):

$( "p" ).find( "#[1-20] -" ).replaceWith( "&quot;<p class='answer'>&quot;" );

maybe you could start using a real unsorted html list instead of a paragraph tag? <ul><li></li>...</ul> — kasper Taeymans
– kasper Taeymans, Commented Jan 1, 2014 at 12:01
Unclosed p element inside another p element? That's an invalid markup. — Ram
– Ram, Commented Jan 1, 2014 at 12:13

Tomalak · Accepted Answer · 2014-01-01 13:00:04Z

1

This is a clean^(*) solution.

$("p:not(:has(*))").each(function () {
    var txt = $(this).text(),
        linePattern = /^\s*(\d+) - (.*)/gm,
        line, paragraphs = [];

    if (linePattern.test(txt)) {
        linePattern.lastIndex = 0;
        while (line = linePattern.exec(txt)) {
            paragraphs.push( $("<p>", {text: '"' + line[2] + '"'}) );
        }
        $(this).replaceWith(paragraphs);
    }
});

^(*) "Clean" as in: DOM-aware and XSS-safe, straight-forward and maintainable.

It converts

<p>
1 - hello
2 - yo
3 - sup
</p>

to

<p>"hello"</p><p>"yo"</p><p>"sup"</p>

answered Jan 1, 2014 at 13:00

Tomalak

339k68 gold badges547 silver badges635 bronze badges

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

Comments

Lucky Ali · Accepted Answer · 2014-01-01 12:08:46Z

0

try like this

var htmlstr = $('p').html(); 
  var splitstr = htmlstr.split('-') ;
  var toreplace = splitstr[0];
  var replacewith = "&quot;<p class='answer'>&quot;";
  splitstr.replace(toreplace,replacewith )

answered Jan 1, 2014 at 12:08

Lucky Ali

3352 gold badges4 silver badges16 bronze badges

2 Comments

Grundy Over a year ago

replace don't change source string unlike replaceWitn

Lucky Ali Over a year ago

what output do you want from the html you mentioned in your question

Collectives™ on Stack Overflow

replace number list with jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related