Microsoft Edge 和 Safari 的正则表达式环视替代方案答案

【问题标题】：Regex lookaround alternative for Microsoft Edge and SafariMicrosoft Edge 和 Safari 的正则表达式环视替代方案
【发布时间】：2021-11-10 21:24:00
【问题描述】：

以下模式在 Chrome 和 FF 中运行良好，但在 Microsoft Edge 和 Safari 中不适用。使其在这些浏览器中工作的解决方法是什么？

var pattern = new RegExp('(?<!\\p{L}\\p{M}*|[\\p{N}_-])(?:' + keywords.map(escapeRegExp).join('|') + ')(?![\\p{L}\\p{N}_-])', 'igu');

编辑：

我创建了一个https://jsfiddle.net/seb_london/64a9m0L1/17/ - 在文本区域中输入 php、java 或 .net。关键字将在 Chrome 中突出显示，但在 Microsoft Edge 42.17134.1.0 中不会突出显示，我相信这与 Safari 中的问题相同。

【问题讨论】：

如果你想要完全相同的功能，你不会喜欢它。这里的共识通常是使用一些变通方法。比如说，空白边界。
什么不起作用。我在 EDGE 和 var pattern = new RegExp('(?
谢谢。这是我与github.com/lonekorean/highlight-within-textarea 插件一起使用的正则表达式，但我无法将其作为代码sn-p 来显示它是如何工作的。使用这个插件/正则表达式，我可以在 Chrome 和 FF 中突出显示单词，但在 Edge 和 Safari 中则不能。
您可以尝试使用更简单的正则表达式来检查插件是否正常工作吗？您正在使用 PHP 支持的“\p{L}”、“\p{M}”，但可能不是来自任何语言的任何类型的字母，例如 PHP。尝试将其替换为“\s”（空格）。尝试 new RegExp('(?
您的新 ReExp 不起作用（即使在 Chrome 中）。但我明白你的意思，我会考虑为 JS 简化它。感谢您的帮助。

标签： javascript regex safari microsoft-edge regex-lookarounds

【解决方案1】：

根据您的描述，您目前使用的是Legacy Edge。但是微软从 2021 年 3 月 9 日起就停止支持了。所以我觉得你可以试试新版 Microsoft Edge，它已经更新到了 93.0.961.52 版本。

并且可以正确执行你提到的代码。这是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Highlight Within Textarea</title>
    <!--<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Droid+Sans+Mono" rel="stylesheet">-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- highlight-within-textarea CSS/JS -->
    <link href="https://lonekorean.github.io/highlight-within-textarea/jquery.highlight-within-textarea.css" rel="stylesheet">
    <script src="https://lonekorean.github.io/highlight-within-textarea/jquery.highlight-within-textarea.js"></script>
    <!-- custom styles for highlight-within-textarea -->
    <style>

        .hwt-container {
            background-color: #f8f9fa;
        }

        .hwt-content {
            width: 760px;
            height: 100px;
            padding: 20px;
            border: 1px solid #adb5bd;
            color: inherit;
            font: 18px/25px 'Droid Sans Mono', sans-serif;
        }

        .hwt-input:focus {
            outline-color: #495057;
        }

        .hwt-content mark {
            border-radius: 3px;
            background-color: #d0bfff;
        }

            .hwt-content mark.red {
                background-color: #ffc9c9;
            }

            .hwt-content mark.blue {
                background-color: #a3daff;
            }

            .hwt-content mark.yellow {
                background-color: #ffec99;
            }

        * {
            box-sizing: border-box;
        }

        body {
            max-width: 800px;
            margin: 40px auto;
            padding: 0 20px;
            font: 18px/1.4 'Open Sans', sans-serif;
            color: #495057;
            background-color: #f1f3f5;
        }

        a {
            display: inline-block;
            margin-bottom: 5px;
            padding: 10px 30px;
            border-radius: 5px;
            color: #f8f9fa;
            background-color: #495057;
            text-decoration: none;
        }

        section {
            margin-top: 60px;
        }

        code {
            padding: 0 5px;
            font-family: 'Droid Sans Mono', sans-serif;
            font-size: 16px;
            background-color: #dee2e6;
        }

        script {
            display: block;
            margin-top: 10px;
            padding-left: 15px;
            border-left: 5px solid #adb5bd;
            background-color: #e9ecef;
            white-space: pre-wrap;
            font: 14px/1.5 'Droid Sans Mono', sans-serif;
        }
    </style>

    <!-- general styles to make this page look decent -->
</head>
<body>
    <h1>Highlight Within Textarea</h1>
    <section>
        <h2>RegExp</h2>
        <p>Don't forget the <code>g</code> (find all) and <code>i</code> (case-insensitive) flags if you need them.</p>
        <textarea class="regex-example">Dog, cat,php, chicken,java, .net ,goose. Dogs, cats, chickens, geese.</textarea>
        <script>
            const arrOfWordsToHighlight = ["php", "java", ".net"];

            function escapeRegExp(arrOfWordsToHighlight) {
                return arrOfWordsToHighlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
            }

            var pattern = new RegExp('(?<!\\p{L}\\p{M}*|[\\p{N}_-])(?:' + arrOfWordsToHighlight.map(escapeRegExp).join('|') + ')(?![\\p{L}\\p{N}_-])', 'igu');
            console.log(pattern);
            $('.regex-example').highlightWithinTextarea({
                /* highlight: /dogs?|cats?|g(oo|ee)se/gi*/
                highlight: pattern
            });
        </script>
    </section>
</body>
</html>

结果：

【讨论】：

非常感谢您签入最新版本的 Edge，很高兴它能正常工作。但它不是在Safari 12中突出显示单词，我没有最新版本14。
@Wiktor Stribiżew 不久前修复了它，但当时我没有得到它。现在我也让它在 Safari 中工作。感谢 Wiktor 抽出宝贵时间，感谢大家。带有答案的原始帖子。 stackoverflow.com/questions/59139887/…