![](/img/trans.png)
[英]Javascript string replace space with no-break space after a specific word
[英]Add a break after a specific word with Javascript
我正在一個網站上工作(內置 WordPress),我有一個表格插件,我不能通過簡單地使用br
標簽甚至插入span
來破壞單詞或文本,因為表格插件不允許使用 HTML 標簽。
我想實現的是打破一些th
文本。
具體來說,我想像這樣拆分此文本:
安扎爾
齊默
Netto-
沃恩弗萊什
韋爾考夫斯-
瑞士法郎
我想知道如何用它來實現這一點。
在這里表th
<th data-class="expand" class="wdtheader sort column-block sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Haus: activate to sort column ascending">Haus</th>
<th class="wdtheader sort column-wohnung sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Wohnung: activate to sort column ascending">Wohnung</th>
<th class="wdtheader sort column-anzahlzimmer sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Anzahl Zimmer: activate to sort column ascending">Anzahl Zimmer</th>
<th class="wdtheader sort column-etage sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Etage: activate to sort column ascending">Etage</th>
<th class="wdtheader sort column-nettowohnflache sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Netto-wohnfläche: activate to sort column ascending">Netto-wohnfläche</th>
<th class="wdtheader sort column-sitzplatz sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Aussenfläche: activate to sort column ascending">Aussenfläche</th>
<th class="wdtheader sort column-verkaufspreischf sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Verkaufspreis CHF: activate to sort column ascending">Verkaufspreis CHF</th>
<th class="wdtheader sort column-pdf sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="PDF: activate to sort column ascending">PDF</th>
<th class="wdtheader sort column-anfrage sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Anfrage: activate to sort column ascending">Anfrage</th>
完整的表格代碼在這里https://jsfiddle.net/0bkgLqx5/
我假設 table 插件將 id 分配給table
標簽或thead
或th
有效父標簽。
舉個例子:
HTML:
<table id="table">
<th data-class="expand" class="wdtheader sort column-block sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Haus: activate to sort column ascending">Haus</th>
<th class="wdtheader sort column-anzahlzimmer sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Anzahl Zimmer: activate to sort column ascending">Anzahl Zimmer</th>
<th class="wdtheader sort column-nettowohnflache sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Netto-wohnfläche: activate to sort column ascending">Netto-wohnfläche
</table>
爪哇腳本:
var th = document.querySelectorAll('#table th');
th.forEach(function(t) {
var text = t.textContent;
var output = text.replace(/[ |-]/g, '<br>');
console.log(output); // check your browser console for output.
t.innerHTML = output;
});
我使用JavaScript來代替空間“”和連字符“ - ”中th
標簽內容。
替換模式“ [ |-]
”將查找任何空格或破折號並將其替換為br
標簽。
除了|
之外,您還可以使用其他條件|
“ OR
”。
更新的答案
根據來自小提琴的OP代碼。
var th = document.querySelectorAll('#table_1 thead th'); th.forEach(function(t) { var text = t.textContent; var output = text.replace(/[ |-]/g, '<br>'); t.innerHTML = output; });
<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper"> <div class="dt-buttons"></div> <div class="clear"></div> <div class="wdtscroll"> <table id="table_1" class="scroll responsive display nowrap data-t data-t wpDataTable dataTable" style="" data-described-by="table_1_desc" data-wpdatatable_id="4" role="grid"> <thead> <tr role="row"> <th data-class="expand" class="wdtheader sort column-block sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Haus: activate to sort column ascending">Haus</th> <th class="wdtheader sort column-wohnung sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Wohnung: activate to sort column ascending">Wohnung</th> <th class="wdtheader sort column-anzahlzimmer sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Anzahl Zimmer: activate to sort column ascending">Anzahl Zimmer</th> <th class="wdtheader sort column-etage sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Etage: activate to sort column ascending">Etage</th> <th class="wdtheader sort column-nettowohnflache sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Netto-wohnfläche: activate to sort column ascending">Netto-wohnfläche</th> <th class="wdtheader sort column-sitzplatz sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Aussenfläche: activate to sort column ascending">Aussenfläche</th> <th class="wdtheader sort column-verkaufspreischf sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Verkaufspreis CHF: activate to sort column ascending">Verkaufspreis CHF</th> <th class="wdtheader sort column-pdf sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="PDF: activate to sort column ascending">PDF</th> <th class="wdtheader sort column-anfrage sorting" style="" tabindex="0" aria-controls="table_1" rowspan="1" colspan="1" aria-label="Anfrage: activate to sort column ascending">Anfrage</th> </tr> </thead> <tbody> <tr role="row" class="odd ani-c-one"> <td class=" column-block"><span class="responsiveExpander"></span>C</td> <td class=" column-wohnung">C16 – 0.1</td> <td class=" column-anzahlzimmer">3½</td> <td class=" column-etage">EG</td> <td class=" column-nettowohnflache">ca. 99,0 m<sup>2</sup> </td> <td class=" column-sitzplatz">ca. 16,5 m<sup>2</sup> + Rasenfläche</td> <td class=" column-verkaufspreischf">570'000</td> <td class=" column-pdf"> <a href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C16-0.1.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" width="auto" height="20"></a> </td> <td class=" column-anfrage"> <a href="mailto:kirchmatt@gribi.com?subject=C16%20%E2%80%93%200.1"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/Anfrage.png" width="auto" height="15"></a> </td> </tr> <tr role="row" class="even ani-c-two"> <td class=" column-block"><span class="responsiveExpander"></span>C</td> <td class=" column-wohnung">C16 – 0.2</td> <td class=" column-anzahlzimmer">4½</td> <td class=" column-etage">EG</td> <td class=" column-nettowohnflache">ca. 113,5 m<sup>2</sup> </td> <td class=" column-sitzplatz">ca. 16,5 m<sup>2</sup> + Rasenfläche</td> <td class=" column-verkaufspreischf">665'000</td> <td class=" column-pdf"> <a href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C16-0.2.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" width="auto" height="20"></a> </td> <td class=" column-anfrage"> <a href="mailto:kirchmatt@gribi.com?subject=C16%20%E2%80%93%200.2"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/Anfrage.png" width="auto" height="15"></a> </td> </tr> <tr role="row" class="odd ani-c-three"> <td class=" column-block"><span class="responsiveExpander"></span>C</td> <td class=" column-wohnung">C16 – 1.1</td> <td class=" column-anzahlzimmer">4½</td> <td class=" column-etage">OG</td> <td class=" column-nettowohnflache">ca. 113,5 m<sup>2</sup> </td> <td class=" column-sitzplatz">ca. 15,5 m<sup>2</sup> </td> <td class=" column-verkaufspreischf">630'000</td> <td class=" column-pdf"> <a href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C16-1.1.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" width="auto" height="20"></a> </td> <td class=" column-anfrage"> <a href="mailto:kirchmatt@gribi.com?subject=C16%20%E2%80%93%201.1"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/Anfrage.png" width="auto" height="15"></a> </td> </tr> <tr role="row" class="even ani-c-four"> <td class=" column-block"><span class="responsiveExpander"></span>C</td> <td class=" column-wohnung">C16 – 1.2</td> <td class=" column-anzahlzimmer">4½</td> <td class=" column-etage">OG</td> <td class=" column-nettowohnflache">ca. 113,5 m<sup>2</sup> </td> <td class=" column-sitzplatz">ca. 15,5 m<sup>2</sup> </td> <td class=" column-verkaufspreischf">650'000</td> <td class=" column-pdf"> <a href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C16-1.2.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" width="auto" height="20"></a> </td> <td class=" column-anfrage"> <a href="mailto:kirchmatt@gribi.comh?subject=C16%20%E2%80%93%201.2"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/Anfrage.png" width="auto" height="15"></a> </td> </tr> <tr role="row" class="odd ani-c-five"> <td class=" column-block"><span class="responsiveExpander"></span>C</td> <td class=" column-wohnung">C16 – 2.1</td> <td class=" column-anzahlzimmer">3½</td> <td class=" column-etage">Attika</td> <td class=" column-nettowohnflache">ca. 88,5 m<sup>2</sup> </td> <td class=" column-sitzplatz">ca. 35,0 m<sup>2</sup> </td> <td class=" column-verkaufspreischf">620'000</td> <td class=" column-pdf"> <a href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C16-2.1.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" width="auto" height="20"></a> </td> <td class=" column-anfrage"> <a href="mailto:kirchmatt@gribi.com?subject=C16%20%E2%80%93%202.1"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/Anfrage.png" width="auto" height="15"></a> </td> </tr> <tr role="row" class="even ani-c-six"> <td class=" column-block"><span class="responsiveExpander"></span>C</td> <td class=" column-wohnung">C18 – 0.1</td> <td class=" column-anzahlzimmer">3½</td> <td class=" column-etage">EG</td> <td class=" column-nettowohnflache">ca. 99,0 m<sup>2</sup> </td> <td class=" column-sitzplatz">ca. 16,5 m<sup>2</sup> + Rasenfläche</td> <td class=" column-verkaufspreischf">590'000</td> <td class=" column-pdf"> <a href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C18-0.1.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" width="auto" height="20"></a> </td> <td class=" column-anfrage"> <a href="mailto:kirchmatt@gribi.com?subject=C18%20%E2%80%93%200.1"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/Anfrage.png" width="auto" height="15"></a> </td> </tr> <tr role="row" class="odd ani-c-seven"> <td class=" column-block"><span class="responsiveExpander"></span>C</td> <td class=" column-wohnung">C18 – 0.2</td> <td class=" column-anzahlzimmer">4½</td> <td class=" column-etage">EG</td> <td class=" column-nettowohnflache">ca. 114,0 m<sup>2</sup> </td> <td class=" column-sitzplatz">ca. 16,5 m<sup>2</sup> + Rasenfläche</td> <td class=" column-verkaufspreischf">645'000</td> <td class=" column-pdf"> <a href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C18-0.2.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" width="auto" height="20"></a> </td> <td class=" column-anfrage"> <a href="mailto:kirchmatt@gribi.com?subject=C18%20%E2%80%93%200.2"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/Anfrage.png" width="auto" height="15"></a> </td> </tr> <tr role="row" class="even ani-c-eight"> <td class=" column-block"><span class="responsiveExpander"></span>C</td> <td class=" column-wohnung">C18 – 1.1</td> <td class=" column-anzahlzimmer">4½</td> <td class=" column-etage">OG</td> <td class=" column-nettowohnflache">ca. 112,5 m<sup>2</sup> </td> <td class=" column-sitzplatz">ca. 15,5 m<sup>2</sup> </td> <td class=" column-verkaufspreischf">650'000</td> <td class=" column-pdf"> <a href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C18-1.1.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" width="auto" height="20"></a> </td> <td class=" column-anfrage"> <a href="mailto:kirchmatt@gribi.comh?subject=C18%20%E2%80%93%201.1"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/Anfrage.png" width="auto" height="15"></a> </td> </tr> <tr role="row" class="odd ani-c-nine"> <td class=" column-block"><span class="responsiveExpander"></span>C</td> <td class=" column-wohnung">C18 – 1.2</td> <td class=" column-anzahlzimmer">4½</td> <td class=" column-etage">OG</td> <td class=" column-nettowohnflache">ca. 113,5 m<sup>2</sup> </td> <td class=" column-sitzplatz">ca. 16,0 m<sup>2</sup> </td> <td class=" column-verkaufspreischf">630'000</td> <td class=" column-pdf"> <a href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C18-1.2.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" width="auto" height="20"></a> </td> <td class=" column-anfrage"> <a href="mailto:kirchmatt@gribi.com?subject=C18%20%E2%80%93%201.2"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/Anfrage.png" width="auto" height="15"></a> </td> </tr> <tr role="row" class="even ani-c-ten"> <td class=" column-block"><span class="responsiveExpander"></span>C</td> <td class=" column-wohnung">C18 – 2.1</td> <td class=" column-anzahlzimmer">3½</td> <td class=" column-etage">Attika</td> <td class=" column-nettowohnflache">ca. 88,5 m<sup>2</sup> </td> <td class=" column-sitzplatz">ca. 35,0 m<sup>2</sup> </td> <td class=" column-verkaufspreischf">620'000</td> <td class=" column-pdf"> <a href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C18-2.1.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" width="auto" height="20"></a> </td> <td class=" column-anfrage"> <a href="mailto:kirchmatt@gribi.com?subject=C18%20%E2%80%93%202.1"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/Anfrage.png" width="auto" height="15"></a> </td> </tr> <tr role="row" class="odd ani-c-eleven"> <td class=" column-block"><span class="responsiveExpander"></span>C</td> <td class=" column-wohnung">C18 – 2.2</td> <td class=" column-anzahlzimmer">4½</td> <td class=" column-etage">Attika</td> <td class=" column-nettowohnflache">ca. 132,0 m<sup>2</sup> </td> <td class=" column-sitzplatz">ca. 71,0 m<sup>2</sup> </td> <td class=" column-verkaufspreischf">845'000</td> <td class=" column-pdf"> <a href="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/C18-2.2.pdf" target="_blank"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/pdf.png" width="auto" height="20"></a> </td> <td class=" column-anfrage"> <a href="mailto:kirchmatt@gribi.com?subject=C18%20%E2%80%93%202.2"><img src="https://kirchmatt-breitenbach.ch/wp-content/uploads/2018/10/Anfrage.png" width="auto" height="15"></a> </td> </tr> </tbody> <tfoot> <tr style="display: none"> <td class="wdtheader sort column-block" style="" rowspan="1" colspan="1"></td> <td class="wdtheader sort column-wohnung" style="" rowspan="1" colspan="1"></td> <td class="wdtheader sort column-anzahlzimmer" style="" rowspan="1" colspan="1">Anzahl Zimmer</td> <td class="wdtheader sort column-etage" style="" rowspan="1" colspan="1">Etage</td> <td class="wdtheader sort column-nettowohnflache" style="" rowspan="1" colspan="1"></td> <td class="wdtheader sort column-sitzplatz" style="" rowspan="1" colspan="1"></td> <td class="wdtheader sort column-verkaufspreischf" style="" rowspan="1" colspan="1"></td> <td class="wdtheader sort column-pdf" style="" rowspan="1" colspan="1"></td> <td class="wdtheader sort column-anfrage" style="" rowspan="1" colspan="1"></td> </tr> </tfoot> </table> </div> <div class="dataTables_paginate paging_full_numbers" id="table_1_paginate" style="display: none;"><a class="paginate_button first disabled" aria-controls="table_1" data-dt-idx="0" tabindex="0" id="table_1_first">First</a><a class="paginate_button previous disabled" aria-controls="table_1" data-dt-idx="1" tabindex="0" id="table_1_previous">Previous</a><span><a class="paginate_button current" aria-controls="table_1" data-dt-idx="2" tabindex="0">1</a></span><a class="paginate_button next disabled" aria-controls="table_1" data-dt-idx="3" tabindex="0" id="table_1_next">Next</a><a class="paginate_button last disabled" aria-controls="table_1" data-dt-idx="4" tabindex="0" id="table_1_last">Last</a></div> </div>
加載表后,使用onload
方法加載 JavaScript。 您也可以將腳本放在頁腳中。
window.onload = function() { // code goes here }
感謝莎拉提到onload
方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.