javascript - 搜索词条，将其包装到 标签中

Question

我有一些文本存储在变量 $target 中:

var $target = jQuery(this).text();

文本可以是这样的:

Hello world, attack on titan 進撃の巨人 is amazing!

然后我有变量$term通过:

var $term = jQuery(this).prev().text();

它可以包含如下内容:

attack on titan

在一个名为 $result 的新变量中, 我要搜索 $target $term的内容并将其包装成 <span>标签。所以在这个例子中，$result将是:

var $result = 'Hello world, <span>attack on titan</span> 進撃の巨人 is amazing!';

一个相对简单的要求，但我的目标是这里的性能。最好的方法是什么？

Answer 1

Working Fiddle

这里有一个相对简单的方法:

var $target = "Hello world, attack on titan 進撃の巨人 is amazing!";
var $term = "attack on titan";
var $result;

$result = $target.replace($term, "<span>"+$term+"</span>");

console.log($result); // => Hello world, <span>attack on titan</span> 進撃の巨人 is amazing!

我们所做的是替换 term我们正在寻找 target与 term包裹在 <span></span> .

此外，如果您计划不止一次执行此操作，我建议您简化流程并将其作为一项功能:

var wrapInSpan = function(target, term){
    return target.replace(term, "<span>"+term+"</span>");
}

$result = wrapInSpan($target, $term);

console.log($result); // => Hello world, <span>attack on titan</span> 進撃の巨人 is amazing!

注意:

通常称为bad practice to altar the prototype of a native object ，就像@Michael 的解决方案一样。如果你想让解决方案更加模块化，我建议像在我的解决方案中一样将它变成它自己的独立函数，而不是篡改 String对象。