• JavaScript 通过正则测试页面是否出现连续的重复字符

            在上班的路上，从群里看到有个测试朋友问有没有查看页面上是否有重叠字的工具。从字面意思看，我理解为样式问题导致文字出现堆叠。

            他正在对一本上百页的一本说明书进行最后的矫正，检查是否有两个相同的字符连续出现，例如：小姐姐；、、；测试试；。。。等等类似疑似手误出现的错别字。

            群里有大神正确的理解了需求并立马给出了解决方案，同时附带一篇博客《Python网页正则匹配搜索工具》，我和提问的人一样，对 Python 都不熟悉，不能在短时间内将工具投入使用。

            不过通过这边文章得到一个启发，以及对挑战的挑逗我认为可以用 JavaScript 写正则在控制台实现类似的功能，只要有浏览器就可以使用的简单方式，对环境要求相对要低一些。

            接下来就是在网络中搜索“匹配连续字符”的正则，很快就找到一个：

    (.)(?!\1)(.)\2

            然后就是将正则融入到 JavaScript 中实现匹配，并输出匹配结果。下面是实现的第一版代码与使用实现效果：

    1. var text = document.body.innerText;
    2. console.log(text.search(/(.)(?!\1)(.)\2/ig));
    图一

            如图一所示，页面存在连续重复的字符，位置在 55，如果不存在则会返回 -1 。到这里验证了解决方案可行，于是将这两句代码发到群里，心里美滋滋的，这种帮助人的感觉真好。

            没多会儿就收到了反馈，反馈的内容是这个输出的数字代表什么意思，怎么才能定位找到的内容在哪里。其实刚开始对于这个数字我也是模糊的，于是就写了个简单的 HTML 静态页面来尝试理解返回的数字代表什么意思。

    1. <html>
    2. <body>
    3. 	<div>No.0 - 33<div>
    4. 	<div>No.1 - 44<div>
    5. 	<div>No.2 - <div>
    6. 	<div>No.3 - <div>
    7. body>
    8. html>
    图二

             静态 HTML 内容如上，运行效果如图二所示，这次返回的结果是 6。看到这个数字我理解了她表达的是字符串下标。

            于是将结论发到群里，现在主要的代码只有两行，并且代码的思想也已经确定了，接下来如果在这个基础上扩展就可以完整的实现“测试页面是否存在连续的重复字符”的需求。从代码的角度来思考的确可以这样，但是这位朋友对 JavaScript 不熟悉，所以这条路走不通。于是再次尝试升级为可以输出定位到的内容，效果如图三，输出的内容最前面就是定位到的内容。

    图三

             又过了一会，又有了新的反馈，问页面上肉眼可见的有多处，为什么只输出了一处。针对这个问题索性帮人帮到底，于是再次将代码进行升级。这次代码尝试将整个页面都搜索一次，并将所有找到的内容输出，对不对由人来判断。下面图四是升级后的效果。

    图四

             可以看到页面上的两个连续出现的字符“33”，“44”都被找出来了。到这里已经完全覆盖了本次测试的需求。个人目前主要的开发方向是 C# 语言写后端代码，已经好多年都没有把大量的写 JavaScript 代码了。但是针对这位测试朋友正在使用浏览器的场景，判断使用 JavaScript 来解决是比较轻量级的解决方案，下面是完整代码，有兴趣的还可以再继续升级下 ~~~~

    1. var searchText = function(str) {
    2.     var line = str.search(/(.)(?!\1)(.)\2/ig);
    3.     if(line > -1) console.log(str.substr(line, 10));
    4.     return line;
    5. }
    6.  
    7. var text = document.body.innerText;
    8. var result = 0;
    9. console.log(text.substr(0, text.length));
    10. for(var i = 0; i <= text.length; i++) {
    11.     if(result == -1) break;
    12.     result = searchText(text.substr(i, text.length));
    13.    // console.log('result:' +result);
    14. }

            最终在这位测试朋友的奇思妙想下，催生了这么一段简单的代码。却将一个需要数天的测试工作量缩减在一天内完成，同时也得到测试朋友发出的塔利班的肯定。印证了小平同志的一句话“科学技术是第一生产力”。

  • 相关阅读:
    集成多元算法，打造高效字面文本相似度计算与匹配搜索解决方案，助力文本匹配冷启动[BM25、词向量、SimHash、Tfidf、SequenceMatcher]
    P1~P2 模板起源
    微信小程序 - - - input和键盘一起上弹如何实现?
    t检验（连续变量）和卡方检验（分类变量）
    vue3+ts打包报错处理
    Python常用模块
    Codeforces Round #811 (Div. 3)
    webpack5识别html中的图片以及将图片打包到对应的文件夹中
    腾讯云AMD服务器标准型SA4实例CPU性能测评
    前端控制小数点精度及数字千位分割
  • 原文地址：https://blog.csdn.net/S2T11Enterprise/article/details/126829941