搜索术语，将其包装到<span>标签中

Search for term, wrap it into <span> tags

本文关键字：span 标签 术语 包装 搜索      更新时间：2023-09-26

>我有一些文本存储在变量$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!';

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

工作小提琴

这是一个相对简单的方法：

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!

我们所做的是将我们在target中寻找的term替换为包裹在<span></span>中的term。

另外，如果您打算多次执行此操作，我建议您简化流程并使其成为功能：

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!

注意：

通常是指将原生对象的prototype祭坛的不良做法，就像@Michael的解决方案一样。如果你想使解决方案更加模块化，我建议像在我的解决方案中一样将其变成它自己的独立功能，而不是篡改String对象。

var target="Hello world, attack on titan 進撃の巨人 is amazing!";
var term="attack on titan";
var result=target.replace(term,"<span>"+term+"</span>");

您可以尝试使用 .indexOf 方法搜索$target中的$term。

var $target = "this is some cool text";
var $term = "cool";
var $result;
if($target.indexOf($term) != -1) {
    $result = $target.replace($term, "<span>"+$term+"</span>");
}
else {
alert('Not there')
}
相关文章：