通过数组迭代在<div>中查找文本?

时间:2017-03-21 05:24:05

标签: javascript jquery html typescript

所以我在这里有这篇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");
  }
}

我试图让它来查找数组中的一段文字是否在元素中。

现在使用代码,它只会突出显示文本,如果它正是文本,没有像我现在这样的小块文本

任何改进代码的帮助都会很棒!

6 个答案:

答案 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")
  }
})

DEMO

答案 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中,例如:

&#13;
&#13;
<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;
&#13;
&#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)

我认为是这样的。

&#13;
&#13;
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;
&#13;
&#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>