---
# System prepended metadata

title: 使用JS實現空格轉換為<br>的技巧
tags: [javascript]

---

---
tags: javascript
---

:::info


**範例：**
**網頁中標題的第一個空白需用js改成`<br>`**


A)
「TM-307 圓頭拉環式門鎖」

B)
「TM-307 圓頭拉環式 門鎖」

－－－－－－－－－－－－－－－－－－－－

需調整如下：
A)
TM-307
圓頭拉環式門鎖

B)
TM-307
圓頭拉環式 門鎖


**[備註]**
**需遍歷每個標題元素**
**確保在有獲取到標題元素時才執行操作**



```javascript=
document.addEventListener('DOMContentLoaded', function () {
    // 獲取所有的標題元素
    let titleElements = document.querySelectorAll('.b-product-list__group .b-card__title .b-text');

    // 遍歷每個標題元素
    titleElements.forEach(titleElement => {
        // 獲取標題文本內容
        let titleText = titleElement.textContent;

        // 查找第一個空格的索引位置
        let firstSpaceIndex = titleText.indexOf(' ');

        // 分割標題文本
        let model = titleText.substring(0, firstSpaceIndex);
        let description = titleText.substring(firstSpaceIndex + 1);

        // 更新標題元素內容
        titleElement.innerHTML = `${model}<br>${description}`;
    });
});

```