Question

我希望能够点击锚标记并让它突出显示其下方div中的相应单词。看起来我见过的每个例子都需要输入，但我希望能够用按钮或锚标签来做。这是我的小提琴还没有奏效。有什么我想念的吗？

$('#search').click(function () {
    var test = new RegExp(
        $('#search').text().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 
        'gi');
    $('#sample').children().addBack().not('.highlight').contents().filter(function() {
        return this.nodeType === 3;
    }).replaceWith(function(){
        return this.str.replace(test, '<span class="highlight">$&</span>');
    });
});

$('#revert').click(function(){
    $(".highlight").contents().unwrap();
});

Answer 1

说实话，我无法理解你的代码。但是我已经编写了适合你所需要的东西，即：

点击#search后，我们会检索其text()并将#sample替换为<span class="highlight">text of #search</span>。
点击#revert后，我们仅将#sample html()替换为#sample text()。

＆＃13;

$('#search').click(function () {
    var re = new RegExp("\\b" + $("#search").text() + "\\b","ig");
    $("#sample").html($("#sample").text().replace(re, '<span class="highlight">$&</span>'))
});

$('#revert').click(function(){
    $("#sample").html($("#sample").text());
});

＆＃13;

.highlight {
    background-color:yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="search">Yoda</a>
<button id="revert">Revert!</button>
<p id="sample">Highlight the word Yoda Yodada</p>

＆＃13;

注意：

正则表达式具有字边界（\b）并且匹配Yoda但是不 Yodada

Answer 2

您的代码和已经回复的答案不正确，但可能会产生负面影响。将.html()与jQuery或innerHTML与VanillaJS一起使用将销毁元素上的所有事件，并同时触发DOM的生成。所以，请停止这样做，否则你会遇到进一步的问题。 使用为此构建的现有组件！

查看mark.js ，关键字/搜索字词或自定义正则表达式的荧光笔。它也可以作为jQuery插件使用。以下示例显示如何使用mark.js在上下文中动态突出显示在输入内输入的文本（请参阅下面的演示）。

＆＃13;

var markInstance = new Mark(document.querySelector(".context"));
function highlight(){
    var searchTerm = document.querySelector("input").value;
    markInstance.unmark().mark(searchTerm);
}

＆＃13;

mark{
    background: yellow;
}

＆＃13;

<script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/mark.min.js"></script>
<input type="text" placeholder="Lorem ipsum..." oninput="highlight()">
<p class="context">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

＆＃13;

Answer 3

这是我能够工作的代码。它与您尝试的内容并不完全相同，特别是在查找要替换的文本方面。

$('#search').click(function () {
    var newtext = $('#search').text().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    var test = new RegExp(newtext, 'gi');
    $('#sample').html($('#sample').text().replace(test, '<span class="highlight">$&</span>'));
});

这将突出显示所选单词。带有过滤器的代码对我来说对你想要实现的目标没有意义，所以我简化了突出显示的工作。

如何使用正则表达式和锚标记突出显示另一个元素中的单词

3 个答案: