我在一个文本元素中有项目的名称，我试图用一个文本框搜索一个特定的项目
<g id="items" class="item">
<text id="text11374" x="103.8269" y="259.80652"><tspan id="tspan11372" fill="#1b1918" font-family="Arial" font-size="1.0583px" stroke-width=".070004">APPLE</tspan></text>
<text id="text11378" x="89.974068" y="267.66498"><tspan id="tspan11376" fill="#1b1918" font-family="Arial" font-size="1.0583px" stroke-width=".070004">CARROT</tspan></text>
<text id="text11382" x="103.1767" y="267.6218"><tspan id="tspan11380" fill="#1b1918" font-family="Arial" font-size="1.0583px" stroke-width=".070004">PINE APPLE</tspan></text>
<text id="text11386" transform="rotate(-90)" x="-254.43674" y="70.620544"><tspan id="tspan11384" fill="#1b1918" font-family="Arial" font-size=".92604px" stroke-width=".070004">TOMATO</tspan></text>
<text id="text11390" x="59.5481" y="251.54526"><tspan id="tspan11388" fill="#1b1918" font-family="Arial" font-size="1.0583px" stroke-width=".070004">BANANA</tspan></text>
<text id="text11394" x="58.962337" y="244.31653"><tspan id="tspan11392" fill="#1b1918" font-family="Arial" font-size="1.0583px" stroke-width=".070004">BLUE BERRY</tspan></text>
“
在的“input”事件上触发一个函数，该函数搜索所有元素，并在textContent与输入值匹配时切换特定的类名:
null
const EL_find = document.querySelector("#find");
const ELS_text = document.querySelectorAll("svg text");
const findText = (ev) => {
const val = ev.currentTarget.value.trim();
ELS_text.forEach(el => {
const hasText = new RegExp(val, "i").test(el.textContent);
el.classList.toggle("is-found", val && hasText);
});
};
EL_find.addEventListener("input", findText);text {
font: 30px arial, sans-serif;
fill: #000;
opacity: 0.2;
}
.is-found {
fill: red;
opacity: 1;
}<input id="find" placeholder="Search...">
<br>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<g>
<text id="text11374" x="103" y="59"><tspan>APPLE</tspan></text>
<text id="text11378" x="89" y="67"><tspan>CARROT</tspan></text>
<text id="text11382" x="103" y="67"><tspan>PINE APPLE</tspan></text>
<text id="text11386" x="154" y="70"><tspan>TOMATO</tspan></text>
<text id="text11390" x="59" y="51"><tspan>BANANA</tspan></text>
<text id="text11394" x="58" y="44"><tspan>BLUE BERRY</tspan></text>
</g>
</svg>