我正在做一個搜索過濾器突出顯示。但它在替換值時呈現[object Object]而不是<mark>match values</mark>。
目前我有這個代碼。
this.countries.response.filter((val) => {
const position = val.value.toLowerCase().indexOf(this.controls.country.toLowerCase());
if (this.controls.country == "") {
return val;
} else if (position !== -1) {
return val;
}
}).map((e) => {
const position = e.value.toLowerCase().indexOf(this.controls.country.toLowerCase());
let matches = e.value.substring(position, this.controls.country.length position);
const regex = new RegExp(matches, 'gi');
const highlighted = e.value.replace(regex, '<mark>' {matches} '</mark>');
return (
<li class="lov-val list-group-item">
<p>{highlighted}</p>
</li>
)
})
我有這個輸出。
我正在做這樣的事情。
uj5u.com熱心網友回復：
您之所以會看到，[object Object]是因為您將一個物件附加到您的字串中{matches}。你應該做類似的事情，'<mark>' matches '</mark>'以便你附加一個字串。
但是，這可能無法解決問題。我懷疑您仍然會'<mark>EXAMPLE_TEXT</mark>'在輸出中看到字串而不是實際的 html。這是因為包含有效 html 的文本內容僅被解釋為文本，瀏覽器不會將其決議為 html。
看起來您正在撰寫jsx，所以我假設您正在使用 React。一個簡單的解決方法是使用危險的SetInnerHTML 道具。但是，使用它存在安全問題（因此使用謹慎的名稱），因此請自行決定使用它。
我沒有立即的替代方案，但我想應該有某種方法可以將每個國家/地區字串分解為單獨的組件，而不必使用dangerouslySetInnerHTML正則運算式替換惡作劇。
例如
<span>
<span>
SOUTH
</span>
<mark>
AME // this is the part that's highlighted
</mark>
<span>
RICA
</span>
</span>
uj5u.com熱心網友回復：
在不知道您的所有代碼的情況下，我懷疑您只遺漏了一步。你得到一個 HTMLCollection。您必須重復此操作并將匹配項 - 正如您已經正確做的那樣 - 用標記括起來。
這是一個例子，讓你更清楚。
const term = "c"
const countries = document.querySelectorAll("#countries div");
for(let i = 0; i < countries.length; i ) {
countries[i].innerHTML = countries[i].innerHTML.replace(new RegExp(term, "gi"), (match) => `<mark>${match}</mark>`);
}<div id="countries">
<div class="item">USA</div>
<div class="item">China</div>
<div class="item">Canada</div>
</div>
<div id="output"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/365488.html
標籤：javascript html 打字稿 模板