正则表达式突出显示搜索匹配的数字

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>