javascript - 如何修改文本 block 中的内容

Question

我有一些如下所示的 HTML:

<td class="targetTD">
  <a href="http://foo.com">
    <span>content</span>
  </a>
  **Text I want to modify**
  <span>more content</span>
</td>

targetTD 根据呈现的内容迭代动态次数。对于每次迭代，我需要从文本 block 中的代码开头删除“:”的子字符串。不幸的是，它不在自己的元素中，我无法将它包装在一个整洁的 id/class 中。我做了一些搜索，发现了一些我认为可以解决问题的 js:

<script>
var myString = $('.targetTD').html();
myString = myString.replace(': ','');
$('.targetTD').html(myString);
</script>

但这会吐出一个控制台错误:

Unable to get property 'replace' of undefined or null reference.

最终更新(解决方案)

感谢@Vaibhav 提出修复!这个脚本成功了:

<script type="text/javascript">

    $(function() {
        $('.targetTD').each(function () {
            $(this).html($(this).html().replace(/\:\s/g, ''));
        });
    });

</script>

更新1

感谢@BenM，我能够使用以下代码阻止错误的产生:

<script>
$(function() {
    $('.targetTD').html(function() { $(this).html().replace(': ', ''); });
});
</script>

虽然我现在没有收到错误消息，但这仍然没有从文本 block 中删除“:”。关于为什么会这样有什么想法吗？

更新2

广泛提供一些 SharePoint 细节，以回应@ElvisLikeBear 的评论:

• 我要完成的具体任务是从分组列表中隐藏列名称。在 SP2010 中，这很容易通过隐藏 ms-gb 类来实现。 2013 年，Microsoft 将展开/折叠按钮与此类混为一谈，因此无法将其全部隐藏。我已经成功地用列名隐藏了跨度(在我上面的代码中，跨度包含在 a 中)，但是“:”无益地仍在文本 block 中，现在它只是漂浮在每个类别的开头姓名。

• 使用脚本编辑器 Web 部件将代码作为片段部署在页面级别。

Answer 1

Brendan，您的代码存在问题，您将“:”替换为“”，但您没有再次将其分配给同一个 td。

Replace(':','') 函数仅替换第一次出现的':'。请按照我的代码进行操作。它会将所有“:”替换为“”。

引用自“targetTD 根据呈现的内容迭代动态次数”

我假设您需要foreach 循环 来遍历所有 Tds。

HTML :-

<table>
    <tr>
        <td class="targetTD">
            <a href="http://foo.com">
                <span>content</span>
            </a>
            Test:Test1
            <span>more content</span>
        </td>
    </tr>
    <tr>
        <td class="targetTD">
            <a href="http://foo.com">
                <span>content</span>
            </a>
            Test:Test1:test2
            <span>more content</span>
        </td>
    </tr>
    <tr>
        <td class="targetTD">
            <a href="http://foo.com">
                <span>content</span>
            </a>
            Test:Test1:test3:test4
            <span>more content</span>
        </td>
    </tr>
</table>

Jquery:-

<script type="text/javascript">

    $(function() {
        $('.targetTD').each(function () {
            $(this).html($(this).html().replace(/\:/g, ''));
        });
    });
    </script>

脚本已经过测试并且工作正常。