所以我在这里有这篇HTML:
<span id="titletextonly">Some awesome text</span>
使用此Javascript:
let divs= $("#titletextonly");
let array = ['wow', "text"];
for (let i = 0; i < divs.length; i++) {
if (array.includes(divs[i].innerHTML)) {
divs.css("background-color","red");
}
}
我试图让它来查找数组中的一段文字是否在元素中。
现在使用代码,它只会突出显示文本,如果它正是文本,没有像我现在这样的小块文本
任何改进代码的帮助都会很棒!
答案 0 :(得分:0)
由于您使用id
进行选择,因此无需循环使用
// target the element
let divs = $("#titletextonly");
// array of matched element
let array = ['wow', "text"];
// loop over the array and get each item
array.forEach(function(item) {
// Now check if the selected text have this item
// if the item is found in the string, then add background color
if (divs.text().trim().indexOf(item !== -1)) {
divs.css("background-color", "red")
}
})
答案 1 :(得分:0)
您的问题出在此处:array.includes(divs[i].innerHTML)
看起来像是:['wow', "text"].includes("Some awesome text")
。但是你希望在声明而不是整个声明中匹配单个单词。为此,您必须循环遍历文本和数组中的单词以查找匹配。
let divs = $(".titletextonly");
let array = ['wow', "text"];
for (let i = 0; i < divs.length; i++) {
if (array.some((x)=>divs[i].innerHTML.indexOf(x)>-1)) {
divs.eq(i).css("background-color", "red");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="titletextonly">Some awesome text</span>
<span class="titletextonly">Some random words</span>
$。每种方法
由于您已经在使用jQuery来获取元素,因此您可以使用$.each
和$().text()
或$().html()
代替.innerHTML
。保持方法一致总是更好。
let divs = $(".titletextonly");
let array = ['wow', "text"];
$(".titletextonly").each(function(i, el) {
if (array.some((x) => $(el).text().indexOf(x) > -1))
$(el).css("background-color", "red");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="titletextonly">Some awesome text</span>
<span class="titletextonly">Some random words</span>
答案 2 :(得分:0)
您需要检查数组中的每个项目是否包含在您的某个div中,例如:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="titletextonly">Some awesome text</span>
&#13;
{{1}}&#13;
答案 3 :(得分:0)
您可以使用Array#some
方法迭代array
个字符串,并检查您的divs
是否包含每个文本片段:
let divs = $('#titletextonly')
let array = ['wow', 'text']
divs.each(function (i) {
array.some(function (text) {
return this.text().includes(text) && this.css('background-color', 'red')
}, $(this))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="titletextonly">Some awesome text</span>
答案 4 :(得分:0)
我认为是这样的。
let divs = $(".titletextonly");
let array = ['wow', "text"];
for (let i = 0; i < divs.length; i++) {
let innerHTML = divs[i].innerHTML || divs[i].text();
for(let item of array) {
let regex = new RegExp(item, 'g');
let targetStr = `<span style="background-color: red">${item}</span>`;
innerHTML = innerHTML.replace(regex, targetStr)
}
$(divs[i]).html(innerHTML);
}
&#13;
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<div class="titletextonly">Some awesome text</div>
<div class="titletextonly">Some wow awesome text</div>
</body>
&#13;
答案 5 :(得分:0)
循环匹配的div,然后遍历数组匹配值。使用.includes()
比较两个字符串;可以使用CSS类应用样式:
let $divs = $('.text');
let array = ['wow', 'text'],
len = array.length;
$divs.each(function() {
let $div = $(this);
for (var i = 0, n = len; i < n; i++) {
if ($div.text().includes(array[i])) {
$div.addClass('matched');
break;
}
}
});
.matched {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Wow wow wee wow</div>
<div class="text">This doesn't have it</div>
<div class="text">This does have text</div>