是否可以使用jquery只选择字符串的一部分?例如,我有一个文本
<p>Metuentes igitur idem latrones Lycaoniam magna parte campestrem</p>
因此,现在如果用户搜索字符串,我希望它被突出显示(例如,我们使用粗体标记)
<p>Metuentes igitur idem latrones <b>Lycaoniam</b> magna parte campestrem</p>
然后,如果需要,我们可以恢复到原始字符串。
- 第一个问题是,我们是否可以使用jQuery选择这样的子字符串,并使用jQuery方法(如
.css()
)将样式应用于该元素 - 第二个问题是,如果我们没有这样的选择器,我们如何使用jQuery或javascript通过字符串操作来实现它
谢谢。
更新
感谢大家的努力。这是一个小程序,我正在寻找的最终结果http://jsfiddle.net/TPg9p/3/干杯
如果您知道要搜索的元素:
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()不仅可以剥离类(必须相应地设置样式),还可以剥离标记。
使用纯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/.
基于这里的答案:在元素中换行部分文本
您可以执行以下操作:
$('p').html(function(index, oldHtml){
return oldHtml.replace(/(amet)/g, '<span>$1</span>');
});
http://jsfiddle.net/YxMvq/
搜索文本并替换文本。
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);
});
演示
您知道HTML创建时需要哪个单词吗?然后我建议做下面的
<p>Metuentes igitur idem latrones <span class="js-highlightable">Lycaoniam</span> magna parte campestrem</p>`
现在,如果你想突出显示它,只需进行
$(".js-highlightable").toggleClass("highlighted");
任何样式都可以在highligthed
类中定义。如果希望仅将更改应用于具有js-highlightable
类的单个元素,而不是所有元素,也可以将id
用于跨度。