在jQuery中使用包含该文本的新div元素查找并替换特定文本

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

Answer 2

Not pretty, but you can do that.

Sample

http://jsfiddle.net/RqEyJ/

HTML

<div id="container">
</div>

JS

var string = "Width: 80, Depth: 39, Height: 190";
var dimensions = string.split(",");

$("#container").append('<div class="productsDimensions">');

$.each(dimensions, function(index, value) {
    var pair = value.split(":");
    $("#container").append('<div class="row"><span class="name">'+$.trim(pair[0])+'</span>');
    $("#container").append('<span class="value">'+$.trim(pair[1])+'</span></div>');
});

$("#container").append('</div>');

Answer 3

Something like this:

<script type="text/javascript">
    var html = $('<div class="productsDimension">');

    var data = "Width: 80, Depth: 39, Height: 190".split(',');

    $.each(data, function (i, o) {
        var row = $('<div class="row">');
        html.append(row);
        row.append('<span class="name">' + $.trim(o.split(':')[0]) + '</span><span class="value">' + $.trim(o.split(':')[1]) + '</span>')

    });
    $('body').append(html);
</script>

Answer 4

Try this:

<script type="text/javascript">
(function ($) {
    var properties = "Width: 80, Depth: 39, Height: 190".split(','),
        wrapper = $('<div class="productsDimensions"></div>');
    $(properties).each(function (i, elem) {
        var prop = this.split(':');
        wrapper.append($('<div class="row"></div>')
                .append($('<span class="name"></span>').text(prop[0]))
                .append($('<span class="value"></span>').text(prop[1])));
        });
})(jQuery);

</script>