正则表达式突出显示搜索匹配号码

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"></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"></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>

请注意，原始 post 中的问题是 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 highlight search matching numbers

javascript

regex

regexp-replace