如何修改文本块中的内容

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 迭代动态次数取决于正在呈现的内容。对于每次迭代，我需要从文本块中代码的开头删除“：”的子字符串。不幸的是，它不在它自己的元素中，我没有能力将它包装在一个整洁的 id/class 中。我做了一些搜索，发现了一些我认为可以解决问题的 js：

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

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

无法获取未定义或空引用的属性“替换”。

最终更新（解决方案）

感谢@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>

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

更新 2

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

• 我要完成的具体任务是从按列表分组的列表中隐藏列名。在 SP2010 中，通过隐藏 ms-gb 类很容易做到这一点。 2013 年，Microsoft 将展开/折叠按钮与此类混为一谈，因此无法将其全部隐藏。我已经成功地隐藏了带有列名的跨度（在我上面的代码中，跨度包含在 a 中），但是“：”仍然在文本块中无济于事，现在它只是漂浮在每个类别的开头名字。

• 代码正在页面级别部署为 sn-p，使用脚本编辑器 Web 部件。

Answer 1

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

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

参考“targetTD根据正在呈现的内容迭代动态次数”

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

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>

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

Answer 2

确保 DOM 准备就绪：

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

Answer 3

您的标记表明这是在 SharePoint 网站上执行的，这就是您的代码未触发的原因。您需要为 SharePoint 正确部署它。

您可以在解决方案或功能中执行此操作，或者如果它是单页脚本，您应该使用脚本 Web 部件（在 SharePoint 2010 和 2007 中称为内容编辑器 Web 部件），您还可以将代码 sn-p 添加到SharePoint 2013 中的页面。

您也可以通过 SharePoint designer 将脚本添加到标签中，但我认为这不是最佳做法，除非在一些非常特定的情况下（但对于非 SharePoint 开发人员来说，这将是最简单的方法）。