替换'>'使用jQuery同时保留所有HTML

时间:2013-05-25 01:43:24

标签: jquery html function replace

我想替换“>”在jQuery中的字符串,但我遇到的问题是我需要保留HTML。这是我正在谈论的一个例子:

<div class="link">
    <a href="#">
        <span>Test ></span>
    </a>
    <a href="#">
        <span>Test 2 ></span>
    </a>
    <a href="#">
        <span>Test 3 ></span>
    </a>
</div>

如果我使用此代码:

$(".link").each(function() {
    var text = $(this).text();
    text = text.replace(/>/g,'/');
    $(this).text(text);
});

它将<span>标记从HTML中删除,因为它用文本替换它。

如果我使用此代码:

$(".link").each(function() {
    var html = $(this).html();
    html = html.replace(/>/g,'/');
    $(this).html(html);
});

它取代了span和anchor标记的结束标记,因为它们在技术上也是>。我试图找到一种方法来替换文本的>而不是它的所有实例。

4 个答案:

答案 0 :(得分:3)

尝试这种方式: -

Demo

$(".link a span").each(function () {
    var text = $(this).text(function (_, oldVal) {
        return oldVal.replace(/>/g, '/')
    });
});

这适用于包含>&gt;

的html
<div class="link"> <a href="#">
        <span>Test &gt;</span>
    </a>
 <a href="#">
        <span>Test 2 &gt;</span>
    </a>
 <a href="#">
        <span>Test 3 &gt;</span>
    </a>

</div>

答案 1 :(得分:0)

您只需搜索包含>的实际文本,而不是整个html。

$(".link span").contents().each(function() {
    var text = this.nodeValue;
    text = text.replace(/>/g,'/');
    this.nodeValue = text;
});

http://jsfiddle.net/L5m24/

答案 2 :(得分:0)

只需将此HTML分配给临时元素的innerHTML,然后阅读此临时元素的innerHTML,您将获得将无效尖括号转换为HTML实体的有效HTML代码。然后,您可以替换&gt;实体而不是>字符。

Live demo

答案 3 :(得分:0)

这个简单的函数会递归地删除它在路上发现的任何文本元素中的所有>&gt;

function removeAllGt(element) {
    $(element).contents().each(function () {
        if (this.nodeType == 3) {
            this.nodeValue = this.nodeValue.replace(/>/g, '/');
        } else {
            removeAllGt(this);
        }
    });
}

用法:

$(".link").each(function () {
    removeAllGt(this);
});

Demo fiddle here