[英]Add a break after a specific word with Javascript
I am working on a website (built in WordPress) and I have a table plugin where I cannot break words or text by simply using the br
tag or even insert span
because the table plugin does not allowes HTML Tags.我正在一个网站上工作(内置 WordPress),我有一个表格插件,我不能通过简单地使用
br
标签甚至插入span
来破坏单词或文本,因为表格插件不允许使用 HTML 标签。
What I want to achieve is to break some th
texts.我想实现的是打破一些
th
文本。
In the specific I would like to split this text like this:具体来说,我想像这样拆分此文本:
Anzahl安扎尔
Zimmer齐默
Netto- Netto-
wohnfläche沃恩弗莱什
Verkaufs-韦尔考夫斯-
preis CHF瑞士法郎
I would like to know how can I achieve this with it.我想知道如何用它来实现这一点。
Here the table th
在这里表
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>
Full table code here https://jsfiddle.net/0bkgLqx5/完整的表格代码在这里https://jsfiddle.net/0bkgLqx5/
I assume that the table plugin assigns id to the table
tag or thead
or valid parent tag for th
.我假设 table 插件将 id 分配给
table
标签或thead
或th
有效父标签。
As an example:举个例子:
HTML: 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>
JAVASCRIPT:爪哇脚本:
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;
});
I am using JavaScript to replace the space " " and hyphens '-' of th
tags content.我使用JavaScript来代替空间“”和连字符“ - ”中
th
标签内容。
The replace pattern " [ |-]
" will find any spaces or dashes and replace it with br
tag.替换模式“
[ |-]
”将查找任何空格或破折号并将其替换为br
标签。
You can play around with other conditions except |
除了
|
之外,您还可以使用其他条件|
" OR
". “
OR
”。
UPDATED ANSWER更新的答案
According to OP's code from fiddle.根据来自小提琴的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>
use onload
method to load JavaScript after your table has been loaded.加载表后,使用
onload
方法加载 JavaScript。 You can place the script in footer too.您也可以将脚本放在页脚中。
window.onload = function() { // code goes here }
Thanks sarah for mentioning onload
method.感谢莎拉提到
onload
方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.