Javascript 将所有非子HTML包装到DOM元素中

我正在为一个网站开发一个小的断字引擎，我得想一想这个问题。我正在匹配所有

p.hyphenatable

，并将内容发送到一个PHP脚本，使其像下面这样连字符：

jQuery(".hyphenatable").each(function() {
    var hyphenatableObject = jQuery(this);

    if (hyphenatableObject.children().size() == 0){ //  Hyphenate only if there is no child elements to prevent HTML from being omitted

        jQuery.ajax({
            type: "POST",
            url: phpHyphenatorUrl,
            data : {
                language:hyphenationLang,
                text: hyphenatableObject.text()
            },
            dataType: "html",
            success: function(data) {
                hyphenatableObject.html(data);
            }
        });
    }
});

为了让这个脚本也能处理带有子元素的元素，我想将匹配的selectore的非封装部分包装成新元素，并将它们发送到web服务。例如：

<p>My text <img src="img.jpg" /> with image</p>

我的文字和图像

变成

<p><span class="whatever">My text</span> <img src="img.jpg" /> <span class="whatever">with image</span></p>

我的文字和图像

---

有什么想法吗？

请发布从Ajax请求返回的

数据内容的外观。php脚本中清除了字符串的可能重复项（删除了hmtl标记等），因此返回的是纯文本。是的，确实是重复的。很抱歉。。。