Question

I am using Zendesk Help Center but customizing it with JS so apologies if that makes this more difficult.

I have many (~2000) articles which begin with "KCS - " (for instance, KCS - How to Issue a Bill). I now want to remove that "KCS - " from all of the article titles. I successfully used the following code to remove the "KCS - " from those titles:

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

This works for the articles themselves, but the "KCS - " still appears in search results. I tried the following code to deal with that:

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

This does remove the "KCS - " but it also removed and tags and results in plain text instead of links appearing in the search results.

I've attached screenshots of the search result code before and after trying to remove the "KCS - ". If anyone has an idea of how I can remove the "KCS - " from the search results without breaking the rest of the code, I would be very grateful. Thanks for your time and thoughts.

Edit: I've posted the browser output as opposed to using screenshots.

Pre-Removal:

` KCS - Documents: Adding New Files and Folders

          <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> `

Post-Removal

` Documents: Adding New Files and Folders

          -1

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

Answer 1

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

相反，将<a>元素定位在<li>内，如此：

$('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伪保持原样类。

使用Javascript替换部分<li>字符串会删除<a> and <span> tags. How can I remove the text but not the tags?

1 个答案: