Question

我需要在我的网站中用特定的文字表示（不只是某些元素）。基于此答案（https://stackoverflow.com/a/51070565/2056216），我提出了以下解决方案：

var barnyardArray = [
    'ipsum',
    'lorem',
    'Lorem'
];

$.each(barnyardArray, function (index, value) {
    $(":not(:contains(\" " + value +" \")), :contains(" + value + ")").html(function (_, html) {
        var regex = new RegExp(value, 'g');
        return html.replace(regex, '<span class="smallcaps">' + value + '</span>');
    });
});

span { color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>We have cows on our farm</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla eget augue at tincidunt. Morbi facilisis ligula at vehicula ornare. Maecenas lobortis quam id purus elementum dignissim. Fusce euismod pellentesque nisi, eu fermentum purus condimentum vitae. Curabitur posuere tempus nulla sed laoreet. Curabitur hendrerit turpis id tempus facilisis. Praesent sit amet efficitur est. Morbi massa lorem, lobortis vitae vestibulum et, dapibus eu metus. Nam interdum efficitur ipsum, quis efficitur leo dapibus a. Donec ultrices, turpis eget rutrum iaculis, quam metus volutpat ante, ultricies egestas leo diam quis magna. In volutpat eros quis eros semper mollis. Duis porttitor porta odio, sit amet suscipit purus finibus sed. Mauris vitae tempor elit, ac cursus libero. Pellentesque interdum elementum ultricies. Quisque nulla tellus, pharetra a vulputate eu, dignissim at purus. Proin nec lobortis eros, eget accumsan tortor.</p>

<p>Vivamus vitae tellus diam. Integer sed diam elementum, luctus lacus suscipit, tincidunt justo. Aliquam fringilla velit vitae risus ullamcorper tincidunt. Aenean sagittis velit eros, ut venenatis elit fringilla sit amet. Pellentesque quis mattis massa. Nullam tincidunt mi vel sapien placerat, non aliquam urna tristique. Vivamus posuere, elit non egestas commodo, orci ipsum congue erat, sit amet dapibus elit risus ut nibh. Nulla dapibus nisi nec rutrum porttitor.</p>

<p>Morbi vitae quam <a href="lorem">lorem</a>. In ligula lacus, ultricies quis lorem nec, imperdiet facilisis lorem. Sed scelerisque enim tortor, vitae luctus orci pharetra ac. Ut lacinia lacus et vehicula cursus. Donec nec enim eget enim consequat ultrices. Ut egestas lectus et nisi euismod, sed molestie erat hendrerit. Pellentesque vel suscipit urna. Nullam placerat sed enim gravida suscipit. Mauris molestie blandit nibh, et euismod ante rutrum eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed auctor dapibus mi, a euismod tortor congue hendrerit. Aenean commodo mi non pulvinar ultricies. Vestibulum consectetur imperdiet ligula ut dapibus.</p>

<p>Vivamus at sem vel elit aliquet condimentum. Suspendisse quis placerat leo. Etiam tristique interdum neque eget laoreet. Aliquam ultricies dui nisi, eget maximus massa efficitur eget. Fusce a pellentesque mi. Aenean vitae eros gravida, placerat nisl nec, scelerisque dui. Etiam quis nisl in odio iaculis faucibus. Duis a velit sed arcu egestas venenatis. Nam non dignissim enim. Praesent maximus auctor nibh a pulvinar. Pellentesque sit amet tincidunt justo. Nunc gravida, turpis quis sagittis lacinia, leo ante volutpat mi, id cursus dui ligula et mauris.</p>

<h2>Pellentesque scelerisque arcu sed elit feugiat, at aliquet urna ullamcorper. Sed ut fermentum eros. Vestibulum auctor et augue nec luctus. Nam egestas elit odio, varius bibendum enim scelerisque finibus. In nec nulla sit amet magna aliquet blandit. Mauris dui eros, sagittis id venenatis eget, mollis sed felis. Sed condimentum facilisis massa, et accumsan urna ullamcorper sit amet. Integer ac laoreet ex. Aliquam venenatis, ipsum quis vestibulum pharetra, ex lectus finibus lacus, quis hendrerit dui mauris at augue. Proin ac bibendum est. Nullam vitae nunc ipsum. </h2>

但是，它仍然无法正常工作并破坏了网站。

希望我能得到一些帮助。

谢谢！

Answer 1

您首先必须限制要搜索的标签以包含该单词。

因为javaScript正则表达式没有负向后看，或者单词可能是属性值的一部分，所以我们必须构造这种情况。

请确保该单词是独立单词，在另一种情况下，我们必须添加单词边界检查。

如果定义了p1，则我们在属性中包含单词，因此返回匹配的属性文本。

$.each(barnyardArray, function (index, value) {
    var regex = new RegExp('(="[^"]*' + value + '[^"]*")|(\\b' + value + '\\b)', 'g');
    $("h2:contains(" + value + "),p:contains(" + value + ")").html(function (_, html) {
        return html.replace(regex, function (m, p1, p2) {
            if (p1) return m;
            return '<span class="smallcaps">' + p2 + '</span>'
        });
    });
});

在页面中查找文本字符串，并在其周围包裹一些span标签

1 个答案: