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

Question

我已经将产品描述作为文字，我可以将其包装到任何容器中，但这是商店模板允许我做的所有内容：

<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>

如何使用jQuery 替换维度字符串：

<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>

我必须自动执行此操作，因为我使用的电子商店应用程序osCommerce不具备允许指定比名称，价格和描述更多的产品信息的功能。

感谢您的任何提示！

EDITED：

很抱歉，但我必须更具体，不要误导你。

我从商店模板得到的是：

<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>

所以我必须首先找到宽度，深度，高度值。

Answer 1

假设你在元素中有Width: 80, Depth: 39, Height: 190（即div，段落等）：

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

---

要回答您编辑的问题，您可以使用以下内容：

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

不漂亮，但你可以做到。

示例

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

这样的事情：

<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

试试这个：

<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>