如何用html元素包装字符串的一个区域?

How could I wrap an area of a string with an html element?

本文关键字：一个 区域 html 何用 元素 包装 字符串      更新时间：2023-09-26

如果我有如下内容:

$ 400/周

$ 800/周

有了jQuery，在像<span class='small'>/week</span>这样的html元素中包装"/week"部分的理想方法是什么?

你可以这样做:

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

这样做并不美观，但唯一安全的方法(保留事件处理程序等)是遍历树，在必要时拆分文本节点。不幸的是，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);
    }
});

。

相关文章：