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

【问题标题】：Replacing '>' with jQuery while preserving all HTML用 jQuery 替换 '>' 同时保留所有 HTML
【发布时间】：2013-05-20 16:25:31
【问题描述】：

我正在尝试在 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 标签的结束标签，因为它们在技术上也是 &gt;。我正在尝试找到一种方法来替换 &gt; 的文本，而不是它的所有实例。

【问题讨论】：

@BenjaminGruenbaum 的建议也解决了您的问题，如果您确保 &gt; 被转义，您所要做的就是替换转义版本 &gt;，那么您可以使用$(this).html(); 版本的示例代码 sn-ps。
你应该使用 >而不是>。 > 用于 html 标签。正如本杰明所说，您的 html 无效
@BenjaminGruenbaum 你确定吗？
@BenjaminGruenbaum 这是什么规范。
@Musa 哇，你是对的。该规范仅在第 4.5 节中禁止 <，可能是因为 &gt; 不应该是模棱两可的。我刚刚在 HTML5 和 HTML4.01 中阅读了该部分 5 次，感谢您教我一些东西 :) 这个 HTML OP 使用的是有效的！ 它通过了 W3C 验证，我手动检查了文档并使用规范对其进行解析。

标签： jquery html function replace

【解决方案1】：

试试这个方法：-

Demo

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

这适用于带有&gt; 和&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>

【讨论】：

我得到了Uncaught TypeError: Object 0 has no method 'replace' ，Chrome 27，Windows 8

【解决方案2】：

您可以只搜索具有> 的实际文本，而不是整个 html。

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

http://jsfiddle.net/L5m24/

【讨论】：

【解决方案3】：

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

Live demo

【讨论】：

【解决方案4】：

这个简单的函数将递归地从任何文本元素中删除所有&gt;或&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.

【讨论】：