带有 jquery 的子字符串选择器？

Question

是否可以使用 jquery 仅选择字符串的一部分？例如我有一个文本

<p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem</p>

所以现在如果用户搜索一个字符串，我希望它被突出显示（例如我们使用粗体标签）

<p>Metuentes igitur idem latrones <b>Lycaoniam</b> magna parte campestrem</p>

如果需要，我们可以恢复到原始字符串。

1. 第一个问题是我们是否可以使用jQuery选择这样的子字符串，并使用诸如.css()之类的jQuery方法将样式应用于该元素。
2. 第二个问题是如果我们没有这样的选择器，我们如何使用jQuery或javascript通过字符串操作来实现它

谢谢。

更新

感谢大家的努力。这是一个小程序，我正在寻找的最终结果http://jsfiddle.net/TPg9p/3/Cheers！

Answer 1

如果您知道要搜索的元素：

var string = "Lycaoniam";
var e = $("elementSelector"); // put here your selector
e.html(e.html().replace(new RegExp(search, "gi"), "<b>"+search+"</b>"));

对于更多元素，只需遍历它们并进行替换。要制作可切换样式，我会使用自定义类：

 e.html(e.html().replace(new RegExp(search, "gi"), "<span class='highlight'>"+search+"</span>"));

并使用以下命令将其删除：

$(".highlight").contents().unwrap();

.contents().unwrap() 不仅可以剥离类（必须相应地设置样式），还可以剥离标签。

Answer 2

纯 jQuery 无法做到这一点。你可以这样做：

var search = 'Lycaoniam';
var orig = $('p').html();
var highlighted = orig.replace(new RegExp(
    search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi'
), '<b>$&</b>');
$('p').html(highlighted);

要恢复到原始文本：

$('p').html(orig);

search.replace(...) 部分允许处理特殊字符：http://jsfiddle.net/wared/TPg9p/。

Answer 3

根据这里的答案：Wrap around part of text inside an element

您可以执行以下操作：

$('p').html(function(index, oldHtml){
   return oldHtml.replace(/(amet)/g, '<span>$1</span>');
});

http://jsfiddle.net/YxMvq/

Answer 4

搜索文本并替换文本。

HTML：

<p id="mainText">Metuentes igitur idem latrones Lycaoniam magna parte campestrem</p>
<input type="text" id="inputTextBox" />
<input type="button" id="findButton" value="Find" />

jQuery :

$("#findButton").click(function(){
    var inputText = $("#inputTextBox").val();
    var mainText = $("#mainText").text();
    var updatedText = "<b>" + inputText + "</b>";
    mainText = mainText.replace(inputText, updatedText);
    $("#mainText").html(mainText);
});

Demo

Answer 5

你知道 HTML 是什么时候创建的你想要哪个词吗？然后我建议改为执行以下操作

<p>Metuentes igitur idem latrones <span class="js-highlightable">Lycaoniam</span> magna parte campestrem</p>`

现在，如果您想突出显示它，就这样做

$(".js-highlightable").toggleClass("highlighted"); 

任何样式都可以在highligthed 类中定义。如果您希望能够仅将更改应用于单个元素而不是具有js-highlightable 类的所有元素，您也可以使用id 作为跨度。