如何修改文本塊中的內容

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中。 我做了一些搜索，發現了一些我認為可以解決的問題：

<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

為了響應@ElvisLikeBear的評論，廣泛提供一些SharePoint細節：

• 我正在嘗試完成的具體任務是從分組列表中隱藏列名。 在SP2010中，通過隱藏ms-gb類很容易做到這一點。 在2013年，微軟已經將這個類集中在擴展/折疊按鈕中，因此不能選擇隱藏它。 我已經成功地用列名隱藏了跨度（在上面的代碼中，包含在a中的span），但是“：”仍然在文本塊中，並且現在它只是在每個類別的開頭浮動名稱。

• 代碼將作為代碼段在頁面級別使用腳本編輯器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>

腳本經過測試，運行正常。

Answer 2

確保DOM已准備就緒：

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

Answer 3

您的標記表明這是在SharePoint網站上執行的，這就是您的代碼未被觸發的原因。 您需要為SharePoint正確部署它。

您可以在解決方案或功能中執行此操作，或者如果它是單頁腳本，您應該使用腳本Web部件（在SharePoint 2010和2007中稱為內容編輯器webpart），您還可以在SharePoint 2013中向頁面添加代碼段。

您還可以通過SharePoint設計器將腳本添加到標記中，但我不認為這是最佳實踐，除非在某些非常特定的方案中（但對於非SharePoint Devleoper而言，這將是最簡單的方法）。