使用 Javascript 替换<li>字符串的一部分会删除<a>和<span>标记。如何删除文本而不删除标签？

Question

我正在使用zendesk帮助中心，但使用JS自定义，如果这使它更加困难，则很抱歉。

我有许多（〜2000）文章以" KCS"开头 - 例如，KCS-如何发布帐单）。我现在想从所有文章标题中删除" KCS"。我成功地使用了以下代码从这些标题中删除" kcs"：

$('h1').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('KCS - ', '')); 

这适用于文章本身，但" KCS"仍然出现在搜索结果中。我尝试了以下代码来处理：

$('li').addClass('search-result').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('KCS - ','')); 

这确实删除了" kcs-"，但它也删除了，并以纯文本为标记和结果，而不是链接出现在搜索结果中。

尝试删除" kcs-"之前和之后，我已经连接了搜索结果代码的屏幕截图。如果有人知道如何从搜索结果中删除" KCS"而不打破代码的其余部分，我将非常感激。感谢您的时间和想法。

编辑：我已经发布了浏览器输出，而不是使用屏幕截图。

预删除：

` KCS - 文档：添加新文件和文件夹

          <span class="search-result-votes">-1</span>
        <div class="search-result-meta">by <a target="_zendesk_lotus" href="/access/return_to?return_to=https://clio1440180657.zendesk.com/agent/users/1229273507/tickets">Name Changed</a> <time datetime="2015-08-26T15:51:48Z" title="2015-08-26 07:51" data-datetime="relative">2 years ago</time> in <a href="https://clio1440180657.zendesk.com/hc/en-us/categories/200678747-Working-with-Clio-Documents">Working with Clovis Documents</a> &gt; <a href="https://clio1440180657.zendesk.com/hc/en-us/sections/201499348-Working-with-Clio-Documents">Working with Clovis Documents</a></div>
        <div class="search-result-description">Creating a <em>New</em> Folder &nbsp; You can add a standalone folder from the "All <em>Files</em>" list or from within any other <em>document</em>...</div>
      </li> `

拆卸后

` 文档：添加新文件和文件夹

          -1
        by *name changed* 2 years ago in Working with Clovis Documents > Working with Clovis Documents
        Creating a New Folder   You can add a standalone folder from the "All Files" list or from within any other document...
      </li>
       `

Answer 1

您在整个HTML元素上使用text（）函数，该元素会破坏您的HTML标签并将整个<div>转换为字符串值。

而是针对<li>内部的<a>元素，例如：

$('li').addClass('search-result').find('a:first-child').each(function() {
    var text = $(this).text();
    $(this).text(text.replace('KCS - ','')); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#">KCS - This is a Search Result Item</a>
    <div>Result content...</div>
  </li>
  <li>
    <a href="#">KCS - This is a Search Result Item</a>
    <div>Result content...</div>
  </li>
  <li>
    <a href="#">KCS - This is a Search Result Item</a>
    <div>Result content...</div>
  </li>
</ul>

注意：如果您有信心<a>元素（链接）始终是<li>的第一个孩子，我建议使用:first-child pseudo类。