2

如果我有以下内容：

400 美元/周

800 美元/周

随着 jQuery 可用，将“/week”部分包装在 html 元素中的理想方法是<span class='small'>/week</span>什么？

4

2 回答 2

4

你可以这样做：

var data = $("#text").html();
$("#text").html(data.replace(/\/\s*week/g, '<span class="small">/week</span>'));

工作示例：http: //jsfiddle.net/jfriend00/TKa8D/

注意：替换 HTML 将撤消在该 HTML 中分配的任何事件处理程序，因此您通常应该在可能的最低级别替换 HTML，这样您就不会替换已经具有事件处理程序的元素。如果您分享您的特定 HTML，我们可以为最简单的方法提供更具体的建议。

于 2013-03-31T22:01:21.743 回答
1

这并不漂亮，但唯一安全的方法（保留事件处理程序等）是遍历树，在必要时拆分文本节点。不幸的是，jQuery 不喜欢使用文本节点。它非常以元素为中心。

您可以首先定义一个辅助函数来执行递归：

function recurse(node, fn) {
    if(node.nodeType === Node.TEXT_NODE) {
        fn(node);
    }else if(node.nodeType === Node.ELEMENT_NODE) {
        var children = Array.prototype.slice.call(node.childNodes);
        for(var i = 0, l = children.length; i < l; i++) {
            recurse(children[i], fn);
        }
    }
}

它遍历树中的每个节点，为每个文本节点调用一个给定的函数。span然后我们可以使用该函数来拆分文本节点并在中间插入 a ：

recurse(document.documentElement, function(node) {
    var re = /(\$\d+)(\/week)/;
    var match;
    while(match = re.exec(node.nodeValue)) {
        var before = document.createTextNode(node.nodeValue.substring(0, match.index + match[1].length));
        node.parentNode.insertBefore(before, node);
        var span = document.createElement('span');
        span.className = 'week';
        span.textContent = node.nodeValue.substring(match.index + match[1].length, match.index + match[0].length);
        node.parentNode.insertBefore(span, node);
        node.nodeValue = node.nodeValue.substring(match.index + match[0].length);
    }
});

尝试一下。

于 2013-03-31T22:10:28.563 回答