如何用jQuery替换这个元素的文本？

Question

我试图创建一种简单的搜索引擎，在哪里 用户输入一个字符串，如果它与内部文本相同 一个元素，必须以某种方式突出显示该部分文本。

这是html：

 <input type="text">
 <input type="button" value="Change text"><br>
 <a href="#">Click here to get more info!</a>

这是css：

.smallcaps{
  color:red;
}

这是进行搜索和替换的jquery函数：

$("input[type='button']").click(function(){
  var textValue = $("input[type=text]").val();
  $("a").html(function(_, html) {
    return  html.replace(new RegExp(textValue,"ig"), '<span class="smallcaps">'+textValue+'</span>');
  });
});

这是一个如何显示的例子：

一切正常，直到搜索字符串等于节点元素的名称，例如，如果搜索字符串是 a ，则html将被破坏。

如何避免替换html本身？我只是想解决这个问题。

这是codepen： http://codepen.io/anon/pen/mefkb

提前致谢！

Answer 1

Updated Demo

解决方法是将<a>恢复为原始文本，而不是使正则表达式复杂化。

您的问题是a，<span>标记正在被替换。

var init = $("a").text();    //save initial value
$("input[type='button']").click(function(){
    $('a').text(init);       //replace with initial value
    var textValue = $("input[type=text]").val();
    $("a").html(function(_, html) { 
         return  html.replace(new RegExp(textValue,"ig"), '<span class="smallcaps">'+textValue+'</span>');
    });
});

Answer 2

我假设您只想突出显示上一次搜索，而不是存储之前的搜索。

通过这个假设，如果是第一次调用，您可以存储旧值，然后在调用中使用存储的值：

$("input[type='button']").click(function(){
    // Escape the html of the input to be able to search for < or >
    var textValue = $('<div/>').text($("input[type=text]").val()).html();
    if(textValue === '') return;

    $("a").html(function(_, html) {
        var old = $(this).data('content');
        if(!old) {
            old = html;
            $(this).data('content', old);
        }
        var replacer = function(match) {
            return match.replace(new RegExp(textValue, "ig"), '<span class="smallcaps">'+textValue+'</span>');
        };

        if(/[<>]/.test(old)) {
            return old.replace(/^[^<>]*</gi, replacer).replace(/>[^<>]*</gi, replacer).replace(/>[^<>]*$/gi, replacer);
        }
        return replacer(old);
    });
});

我还修复了测试时发现的两个错误：

1. 如果你搜索一个空字符串，一切都会被破坏。
2. 如果你搜索像＆lt;这样的html字符或者＆gt;没有找到任何内容，因为它们被转换为＆amp; lt;或＆amp; gt;。

有一件事没有解决，因为在不破坏子元素结构的情况下不可能轻松实现它：不可能在不同的子元素中搜索，因为你必须删除标签，然后搜索并在标签处插入标签。之后的正确位置。

工作小提琴：http://codepen.io/anon/pen/KlxEB