Question

我从一个朋友那里得到了一个脚本，并试图对其进行修改。这样就可以突出显示div中的一串数字。

问题在于，突出显示的文本的输出变为正则表达式。任何解决方案，我在做什么错了？

var list = document.getElementsByClassName("message__content")
var search_word = RegExp(/9756[0-9]{8}/);

var contents = []


for(var i = 0; i < list.length; i++){
var contents = list[i].textContent.split(search_word)


var elem = '<span class="highlight">'+search_word+'</span>'
list[i].innerHTML = contents.join(elem)
}

https://jsfiddle.net/rrggrr/kgd4swha/6/

Answer 1

这是一种简单的方法：

使用string#replace作为/(9756[0-9]{8})/g的正则表达式来捕获值（不要忘记g表示它是全局正则表达式，因此它将在其中的每个匹配项中运行输入字符串），然后替换'<span class="highlight">$1</span>'以使用第一个捕获组并应用标记。

var list = document.getElementsByClassName("message__content")

for (var i = 0; i < list.length; i++) {
  list[i].innerHTML = list[i].textContent.replace(
    /(9756[0-9]{8})/g,
    '<span class="highlight">$1</span>')
}

.highlight {
  color: blue;
}

<div class="message__content">
  Lorem ipsum dolor sit amet, 975600000000 (random quis) adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 975611111111 . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in 975622222222 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. (random quis) 975633333333 sint occaecat (random quis) cupidatat non proident, sunt in culpa qui officia des (random quis) nt mollit anim id est laborum.
</div>

请注意，原始帖子中的问题在于string#split函数实际上并未保存在拆分过程中删除的文本，因此，如果您要采用这种方法，则可以必须在侧面使用string#matchAll，然后在索引上映射以将所有内容正确地放置在一起。

在我意识到string#replace在这种情况下是一种更干净的解决方案之前，我本来是看一下这样做的。

根据评论，这是一种根据正则表达式是否匹配有条件地设置按钮类的方法。

如果目标是检查文本中的每个数字是否都与正则表达式匹配，那么我们可以将/\d+/g的正则表达式替换为函数的替换值，以便我们可以进行regex#test在替换之内。

如果要限制要检查的数字，可以修改/d+/g来更改要替换的内容。

var list = document.getElementsByClassName("message__content")

for (var i = 0; i < list.length; i++) {
  let text = list[i].textContent;
      // Make the regex have boundary characters to ensure that it's checking against the whole number, rather than a part
  const regex = /\b9756[0-9]{8}\b/;
  list[i].innerHTML = text.replace(
    // Replace all number sequences in the text
    /\d+/g,
    // Replace by checking if the replacement text matches the regex to determine color
    (match) => `<button class="${regex.test(match)}">${match}</button>`
  )
}

.highlight {
  color: blue;
}

.true {
  background-color: green;
}

.false {
  background-color: red;
}

<div class="message__content">
  Lorem ipsum dolor sit amet, 975600000000 (random quis) adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 975611111111 . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in 975622222222 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. (random quis) 975633333333 sint occaecat (random quis) cupidatat non proident, sunt in culpa qui officia des (random quis) nt mollit anim id est laborum.
  975600000000, 9756000000009, 097560000000, 9756000
</div>

检查每个数字的另一种可能的方法是分割一个值，然后映射到结果值上。我只是将其包括在内，因为它对易于拆分的内容很有帮助。

var list = document.getElementsByClassName("message__content")

for (var i = 0; i < list.length; i++) {
  // split by ', ' as that is what is separating between values
  const values = list[i].textContent.split(', ');
  // Make the regex have boundary characters to ensure that it's checking against the whole number, rather than a part
  const regex = /\b9756[0-9]{8}\b/;
  list[i].innerHTML = values.map((value) => {
    // Loop over the split values and create buttons based on if the regex is a match against the string
    return `<button class="${regex.test(value)}">${value}</button>`
  }).join(', ');
}

.true {
  background-color: green;
}

.false {
  background-color: red;
}

<div class="message__content">
  975600000000, 9756000000009, 097560000000, 9756000
</div>

regexp突出显示搜索匹配数

1 个答案: