Regular expressions: transferring the data attribute

Question

I'm creating a profile page that changes all <strong>Title</strong> tags into <input type="text" value="Title"> and <p>Content</p> tags into <textarea>Content</textarea> tags.

This works great with this:

$(this).html(function(i, h) {
  return h
    .replace(/<strong>/g, "<input type=\"text\" value=\"")
    .replace(/<\/strong>/g, "\" class=\"profile-header\">")
    .replace(/<p>/g, "<textarea>")
    .replace(/<\/p>/g, "</textarea>");
});

However, I need an ID for each set of <strong> and <p> tags (as they represent different parts of the profile). The issue I'm having is adding an ID for these, which I have put on the <strong> tags like this: <strong data-id="0"> but can't work out why the regular expression I'm using doesn't work properly.

Here's what I have so far, hopefully you can see what I'm trying to achieve:

$(this).html(function(i, h) {
  return h
    .replace(/<strong data-id=\"(\i+)\">/g, "<input $1 type=\"text\" value=\"")
    .replace(/<\/strong>/g, "\" class=\"profile-header\">")
    .replace(/<p>/g, "<textarea>")
    .replace(/<\/p>/g, "</textarea>");
});

And just for reference, this is how I am returning the HTML back to its original state (and how the data is saved):

$(".column.about input").each(function() {

    // Get the titles and content from the inputs and textareas
    var content_id = $(this).data("id");
    var title = $(this).val();
    var content = $(this).next().val();

    // We're changing the content first so we don't loose $(this)
    $(this).next().after("<p>" + content + "</p>").remove();
    $(this).after("<strong data-id=\"" + content_id + "\">" + title + "</strong>").remove();

    $.post("../includes/ajax.php", { action: "updateProfile", section: "about", id: content_id, title: title, content: content }).done(function(data) {

        if(data != "saved") {

        throwErrorMessage(data);

      }

    });

});

It might be easier to work with if you `.each` `"strong"` and `"p"` - then use `insertBefore` - you can then easily transfer attributes with `.attr`, and by the use of classes on the `input/textarea` deal with hiding the originals (i.e. `.editInput + p,.editInput + strong { display:none; }` — MDEV, Aug 26 '13 at 20:51
[Yeah, don't try to parse/manipulate HTML with regular expressions](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) — Mulan, Aug 26 '13 at 20:53
So my best bet is to stop using regex and copy the `.each(function() {` I used to change it back? — Oliver Tappin, Aug 26 '13 at 21:01

score 0 · Accepted Answer · answered Aug 26 '13 at 21:10

Here's what I have done (without regular expressions):

$(".column.about strong").each(function() {

    // Get the titles and content from the strong and p tags
    var content_id = $(this).data("id");
    var title = $(this).text();
    var content = $(this).next().text();

    // We're changing the content first so we don't loose $(this)
    $(this).next().after("<textarea>" + content + "</textarea>").remove();
    $(this).after("<input type=\"text\" data-id=\"" + content_id + "\" value=\"" + title + "\">").remove();

});

And it works. Happy days.

Regular expressions: transferring the data attribute

1 Answers1