文本替换删除 <a> 标签答案

【问题标题】：Text replacements removes <a> tags文本替换删除 <a> 标签
【发布时间】：2021-02-18 18:38:25
【问题描述】：

这是我的 div：

<div class="breadcrumbs">
     <a href="/admin/">Domov</a>
     &rsaquo; <a href="/admin/authtoken/">Tokenová autorizácia</a>
     &rsaquo; Tokens
</div>

我需要将文本“Tokens”替换为“Tokeny” 所以我正在使用这个 jQuery 代码：

$(".breadcrumbs").text(function () {
    return $(this).text().replace("Tokens", "Tokeny");
});

文本被替换，但我丢失了所有“a href”标签。面包屑 div 的结果内容为：

<div class="breadcrumbs">
     Domov
     &rsaquo;Tokenová autorizácia
     &rsaquo; Tokeny
</div>

替换文本时如何保留“a href”链接？

【问题讨论】：

这是由于您的代码只提取了text 而提取了html，它应该同时分配和提取html，因此请将js .text 替换为.html

标签： javascript jquery

【解决方案1】：

问题是因为您使用的是text()，它会删除 HTML。请改用html()。您还可以通过向接受当前 HTML 作为参数的方法提供一个函数来使代码更简洁，然后您可以对其进行修改并返回。试试这个：

$(".breadcrumbs").html((i, html) =&gt; html.replace("Tokens", "Tokeny"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="breadcrumbs">
     <a href="/admin/">Domov</a>
     &rsaquo; <a href="/admin/authtoken/">Tokenová autorizácia</a>
     &rsaquo; Tokens
</div>

【讨论】：

【解决方案2】：

$(".breadcrumbs").html(function () {
    return $(this).html().replace("Tokens", "Tokeny");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="breadcrumbs">
     <a href="/admin/">Domov</a>
     &rsaquo; <a href="/admin/authtoken/">Tokenová autorizácia</a>
     &rsaquo; Tokens
</div>

【讨论】：

【解决方案3】：

您应该使用html() 而不是text() 以保留您的html标签：

let replaced = $(".breadcrumbs").html().replace("Tokens", "Tokeny");
$(".breadcrumbs").html(replaced);

【讨论】：