如何修改文本块中的内容

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>

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

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>

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

更新 2

响应@ElvisLikeBear 的评论，广泛提供一些 SharePoint 细节：

我要完成的具体任务是从分组列表中隐藏列名。在 SP2010 中，这很容易通过隐藏 ms-gb class 来实现。 2013 年，Microsoft 将 expand/collapse 按钮与此 class 混为一谈，因此无法将其全部隐藏。我已经成功地用列名隐藏了跨度（在我上面的代码中，跨度包含在 a 中），但是“：”无益地仍在文本块中，现在它只是漂浮在每个类别的开头名字.
正在使用脚本编辑器 Web 部件将代码作为片段部署在页面级别。

Answer 1

确保 DOM 准备就绪：

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

Answer 2

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

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

您也可以通过 SharePoint designer 将脚本添加到标记中，但我认为这不是最佳做法，除非在某些非常具体的情况下（但对于非 SharePoint Devleoper 来说，这将是最简单的方法).

Answer 3

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

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

参考自"targetTD iterates a dynamic number of times depending on the content being rendered"

我假设您需要 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>

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

如何修改文本块中的内容

How to Modify Content in a Text Block

javascript

css

jquery

sharepoint-2013

最终更新（解决方案）

更新 1

更新 2