如何突出显示任意数量的(可能重复的)a,然后是非贪婪匹配器,然后是任意数量的b等(没有不合理的限制)
How to highlight any amount of (possibly duplicated) As, followed by non-greedy matcher, then by any amount of Bs etc. (without unreasonable limits)?
下面的例子是我想要的突出显示类型的演示("a"
, "b"
, "c"
和"d"
):
var reg = new RegExp("(.*?)([a]{1,})(.*?)([b]{1,})(.*?)([c]{1,})(.*?)([d]{1,})(.*?)", "gi");
var txt = "OK, abacd, abcdt, yaaaxxbyycccczzddddg0011".replace(reg,
'$1<mark>$2</mark>$3<mark>$4</mark>$5<mark>$6</mark>$7<mark>$8</mark>$9');
document.getElementById("test").innerHTML = txt;
<body>
<div id="test"></div>
</body>
这里的问题显然是$n
中n=9
的限制。但是,如果我想为超过4个字符执行此操作(即没有不合理的限制),该怎么办?如何解决这个问题?
尝试使用function作为replace()
这更像@WiktorStribiżew
提到的动态模式var reg = new RegExp(["a", "b", "c", "d"].map(a => "([" + a + "]{1,})(.*?)").reduce((a, i) => a + i, "(.*?)"), "gi");
var txt1 = "OK, abacd, abcdt, yaaaxxbyycccczzddddg0011"
.replace(reg, (m, ...p) => {
p.pop();//pop string
p.pop();//pop offset
return p.reduce((a, i, ix) => a + (ix % 2 ? "<mark>" + i + '</mark>' : i), '')
});
var txt = "OK, abacd, abcdt, yaaaxxbyycccczzddddg0011"
.replace(reg, (m, ...p) => {
p.pop();
p.pop();
return "<br><br>-match-" + m + p.reduce((a, i, ix) => a + "<br>-substring-" + (ix % 2 ? i : "-h-" + i), '')
});
document.getElementById("test").innerHTML = txt1 + txt;
<body>
<div id="test"></div>
</body>
Regex不会给你整个解决方案,它只能是解决方案的一部分。使用regex隔离单个匹配,然后遍历这些匹配并逐一进行替换。在这种情况下,迭代是通过将函数定义传递给.replace()
来完成的,该函数本身有另一个for
循环来完成实际的替换。
我也简化了正则表达式,[a]
只是a
, {1,}
相当于+
。然后,如果你只是把你想要匹配的字符放在一个数组中,你可以.join()
它们一起使正则表达式,以及这个数组在函数内部使用,从最后的<mark>...</mark>
向后到第一个。倒推有助于确保找到的a
仍然在整个匹配的前面,直到最后插入<mark>...</mark>
。它还可以防止获得像<mar<mark>k</mark>>
这样的东西(我将'k'
添加到数组的原因是为了测试这一点)。
您可以看到没有一个正则表达式高于$2
,即使代码突出显示了chars
数组中的5个字符。您可以使这个数组任意长以满足您的需要。我还添加了一个<textarea>
,这样您就可以看到在for
-循环中生成的正则表达式。
var chars = ['a', 'a', 'b', 'c', 'd', 'k'];
var fillr = '+[^<]*?';
var txt = "OK, abacdk, abcdtk, yaaaxxbyycccczzddddgkkkk0011"
.replace(new RegExp(chars.join(fillr) + '+', 'gi'),
function(m) {
for (var i = chars.length-1; i >= 0; i--) {
var rgx = '^' +
((i!=0)?
('(' + chars.slice(0, i).join(fillr) + fillr + ')'):
'()'
) +
'('+chars[i]+'+)';
document.getElementById('srccode').value += i + ''t' + m + ''n't' + rgx + ''n';
m = m.replace(new RegExp(rgx, 'gi'), '$1<mark>$2</mark>');
document.getElementById('srccode').value += ''t' + m + ''n'n';
}
return m.replace(/<'/mark>('s*)<mark>/gi, '$1');
}
);
document.getElementById('srccode').value += ''n'+txt;
document.getElementById("test").innerHTML = txt;
<body>
<textarea id="srccode" rows="10" style="width:100%;white-space: nowrap; overflow:scroll;"></textarea>
<div id="test"></div>
</body>
相关文章:
- 将值输入到对象,然后该对象推送到数组
- 删除重复的数组值,然后存储它们[反应]
- 如何放置ÅÄ和#214;在javascript数组中,然后将其与html文本进行比较
- 找到 JSON 数组的特定部分,然后在 Angular 中更深入
- 从异步调用返回数组,然后为数组的每个元素返回其他异步调用
- 如何要求用户输入一个介于 1 和 50 之间的整数,然后小程序打印出一行这个星数
- 查找文档,然后在数组中查找条目并将其从数组中删除
- JS - getElementsByClassName 数组,然后获取数组内的元素
- 用户取消选择,然后从数组中删除项目并进行排列,具体取决于它们的选择方式
- 将textareinnerhtml附加到数组中,然后在数组中搜索id
- 如何检查多维数组中是否存在字符串,然后显示数组中找到该字符串的第一个项
- 提取任意给定数组中的所有数字,然后将它们全部相加
- 基于"字符串"的任意数组元素;种子
- Javascript程序不使用数学.用for循环求任意数的幂
- 如果我们使用new array (len).fil({})创建对象数组;然后在任意一个对象中添加一个键,它会被反射到所有
- 将变量赋值为这两个数之间的任意数
- 如何将对象数组作为道具传递给组件,然后将数组的成员作为道具传递给嵌套组件?
- 如果希望使用javascript数组作为哈希键,请使用任意数组元素进行检索
- 从数组中加载css和js文件,然后调用数组中的函数
- 如何使用jquery和/或javascript获取多个用户输入并将其存储在数组中,然后访问数组中的元素