Question

如果我有以下内容：

$ 400 /周

$ 800 /周

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

Answer 1

你可以这样做：

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，我们可以以最简单的方式提出更具体的建议。

Answer 2

它并不漂亮，但唯一安全的方法（保留事件处理程序等）就是走树，在必要时拆分文本节点。不幸的是，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：

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);
    }
});

<强> Try it.

我怎么能用html元素包装一个字符串的区域？

2 个答案: