我如何用html元素包裝字符串區域？

Question

如果我有以下內容：

$ 400 /周

$ 800 /周

使用jQuery后，將“ / week”部分包裝在html元素（如<span class='small'>/week</span>的理想方法是什么？

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

試試吧。