javascript - 使用 Javascript 在特定单词后添加中断

标签 javascript css

我在一个网站(内置 WordPress)上工作，我有一个表格插件，我无法通过简单地使用 br 标签甚至插入 span 来打断单词或文本> 因为表格插件不允许 HTML 标签。

我想要实现的是打破一些th文本。

具体来说，我想像这样拆分这段文字:

安扎尔
齐默尔

内托-
wohnfläche

Verkaufs-
奖 瑞士法郎

我想知道如何用它实现这一目标。

这里是表格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/

最佳答案

我假设表格插件将 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>

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;

});

我正在使用 JavaScript 替换 th 标签内容的空格“”和连字符“-”。

替换模式“[ |-]”将找到任何空格或破折号并将其替换为 br 标记。

除了 | "OR"之外，您还可以尝试其他条件。

更新的答案

根据来自 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>

使用 onload 方法在您的表加载后加载 JavaScript。您也可以将脚本放在页脚中。 

window.onload = function() { // code goes here }

感谢 sarah 提到 onload 方法。

关于javascript - 使用 Javascript 在特定单词后添加中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53204815/

上一篇：html - 如何在所有跨浏览器中为 HTML 标签类型 ="range"设计独特的 CSS 布局？

下一篇：javascript - 带有 jQ​​uery 代码链接的 Bootstrap 按钮在多次单击后不更新按钮文本

相关文章：

javascript - 点击后关闭导航选项卡

css - Chrome 等效于 Firefox Firebug CSS 选择路径

html - SVG 变换 :rotate() not working in ie9

css - 如何在 CSS 网格中并排设置列表项

css - 使用 css 反转 svg 图像？

javascript - 'typeof varName === ' 未定义的 ES2015/2016 方式？

javascript - JS计算器指南，不断获取 "not defined"

javascript - 将 html 更改为 var

javascript - Node.js 异步并行不工作应该如何？

javascript - 没有阴影 DOM 的自定义元素 : best way to get an element

©2024 IT工具网  联系我们