mark.js 排除欄位＋數字格式化搜尋

window.addEventListener('contentUpdated', event => {
    let markInstance = new Mark(document.querySelector('#data-rows'));
    markInstance.unmark();
    if (event.detail.search) {
        let searchTerms = [event.detail.search];
        // 如果是純數字，就把數值格式化後再做對比
        if (!isNaN(event.detail.search)) {
            let formattedSearch = Number(event.detail.search).toLocaleString();
            searchTerms.push(formattedSearch);
        }
        markInstance.mark(searchTerms, {

            "ignoreJoiners": true,
            "acrossElements": true,
            // 排除具有 'no-highlight' 
            "exclude": ['.no-highlight'], 
        });
    }
});

解決問題1， 排除欄位

#data-rows 是針對此元素內的所有內容進行 highlight，但如果指定的元素是用了 class="no-highlight" 則不要進行 highlight

解決問題2，數字格式化後再對比

我希望用戶視覺上看到的是 3,000 、12,000 是有格式化的數字，但是這樣一來，用戶搜尋輸入是不太可能把逗號也輸入，不太人性化，所以第8～11行就解決了

即便數據是 75,999， 只需搜尋 759 或 75999都可對比到，而最終出來的高亮顯示是highlight是 格式化後的75,999

客制化css

如果不喜歡官方的css，把這個class name 重寫一下css就可以，比如

<style>
mark {
    background-color: #fff5f8;
    color: #ff3355;
    font-weight: 900;
    text-decoration: underline;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
  }
  </style>