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

Posted 2023-03-28

【中文标题】正则表达式突出显示搜索匹配的数字

【英文标题】：regexp highlight search matching numbers

【发布时间】：2021-01-24 22:23:01

【问题描述】：

我从朋友那里得到了一个脚本，并试图对其进行修改。这样它就会突出显示 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/

【参考方案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>

【讨论】：

谢谢！我还有一个问题——如果你能详细说明一下。如果我想添加一个真/假正则表达式匹配。匹配正则表达式 = 绿色 css。 jsfiddle.net/rrggrr/pw956cou/4

我不完全确定你在这里问什么，抱歉。你的意思是所有不匹配的字符串都应该是红色的，而所有的字符串都应该是绿色的？ jsfiddle.net/urcg8z62

对不起，让我解释一下。我想显示所有值“以 9756 开头，共有 12 个数字”以显示绿色按钮；其余所有值不正确的按钮都是红色的。现在我遇到了按钮“9756000000009”（13 个数字，部分为绿色）“097560000000”（12 个数字，但以 0 开头）“9756000”（7 个数字）的问题。

@RRG，我更新了帖子，提供了一些可能的方式来做你所要求的事情。希望这会有所帮助！

是的，这就是复制文本的正常方式，这很糟糕，尽管有一个更新的 api clipboard api。我将它添加到这个jsfiddle.net/9h4bc3u5/1，但由于事情的设置方式，它不会在小提琴上工作。我还修改了您所拥有的内容，但将其更改为不使用 jquery：jsfiddle.net/9h4bc3u5。至于复制警报，除了alert() 调用之外，添加任何内容都更加复杂。