html 使用Vanilla JS获取完全匹配而不是textContent.includes

c9x0cxw0  于 2023-03-11  发布在  其他
关注(0)|答案(2)|浏览(125)

你有一个工作的JS函数来添加一个基于元素内文本的div,如下所示。
<div class="class">sometext</div>
这很好用,但是我如何使它只用于这个精确匹配,这样如果元素有另一个单词(我知道它是什么),它就不会添加额外的div
我不想添加div的示例:
<div class="class">sometext remove</div>

const descriptions = document.querySelectorAll(".class");
function showDescription() {
    for (const description of descriptions) {
        
        if (description.textContent.includes("sometext")) {
            description.insertAdjacentHTML("beforeend", "<div></div>");
        }
    }
}
showDescription();
bn31dyow

bn31dyow1#

你可以使用正则表达式:

const str = 'sometext';
const regex = /^word$/;
const containsSometext = regex.test(str);

在这里,^表示字符串的开头,$表示字符串的结尾containsSometext将在est为true时返回true,否则返回false

hfsqlsce

hfsqlsce2#

您可以简单地使用===,如下所示:

const descriptions = document.querySelectorAll(".class");
function showDescription() {
    for (const description of descriptions) {
        
        if (description.textContent === "sometext") {
            description.insertAdjacentHTML("beforeend", "<div>newDiv</div>");
        }
    }
}
showDescription();
<div class="class">sometext</div>
<div class="class">sometext2</div>
<div class="class">sometext</div>
<div class="class">sometext remove</div>

如果有两个单词,可以将||===一起使用,或者使用如下数组:
第一章:
一个二个一个一个
二:

const descriptions = document.querySelectorAll(".class");
const textForDiv = ['sometext','sometext2'];
function showDescription() {
    for (const description of descriptions) {
        textForDiv.forEach(el => {
          if (description.textContent === el) {
            description.insertAdjacentHTML("beforeend", "<div>newDiv</div>");
        }
        });        
    }
}
showDescription();
<div class="class">sometext</div>
<div class="class">sometext2</div>
<div class="class">sometext</div>
<div class="class">sometext remove</div>

相关问题