Question

I’ve got products description as text, which I can wrap into any container, but that’s all what shop’s template allows me to do:

<div class="descriptionContainer">
    Some text description, some text description.
    Some text description, some text description.
    Some text description, some text description.
    Width: 80, Depth: 39, Height: 190
</div>

How can I use jQuery to replace dimensions string into:

<div class="productsDimensions">
    <div class="row">
       <span class="name">Width</span>
       <span class="value">80</span>
    </div>
    <div class="row">
       <span class="name">Depth</span>
       <span class="value">39</span>
    </div>
    <div class="row">
       <span class="name">Height</span>
       <span class="value">190</span>
    </div>
</div>

I have to do this automatically, because e-shop application osCommerce that I’m using doesn’t come with feature that allows specifying more product info than name, price and description.

Thanks for any tips!

EDITED:

Sorry but I have to be more specific to not mislead you.

What I got from shop template is:

<div class="descriptionContainer">
    Some text description, some text description.
    Some text description, some text description.
    Some text description, some text description.
    Width: 80, Depth: 39, Height: 190
</div>

So I have to find the Width, Depth, Height values first.

Answer 1

assuming you have Width: 80, Depth: 39, Height: 190 in an element (ie. a div, paragraph, etc.):

var plain = $('#textContainerId').html();
var newContent = jQuery('<div class="productsDimensions" />');
var rows = plain.split(',');
for (var i = 0; i < rows.length; i++) {
    var columns = rows[i].split(':');
    var name = columns[0];
    var val = columns[1];
    jQuery('<div class="row"><span class="name">' + name + '</span><span class="value">' + val + '</span></div>').appendTo(newContent);
}
$('#textContainerId').replaceWith(newContent);

jsFiddle: Here

---

To answer your edited question, you can use something like this:

var plain = $('.descriptionContainer').html();
plain = plain.match(/(\w+:\s*\d+)/g);
var newContent = jQuery('<div class="productsDimensions" />');
$(plain).each(function(index, value) {
    var columns = value.split(':');
    var name = columns[0];
    var val = columns[1];
    jQuery('<div class="row"><span class="name">' + name + '</span><span class="value">' + val + '</span></div>').appendTo(newContent);
});

$('.descriptionContainer').html($('.descriptionContainer').html().replace(/(\w+:\s*\d+,?\s*)/g, '')).append(newContent);

jsFiddle: Here