我正在创建一个Chrome扩展程序,以在页面上突出显示用户名。我能够检测到页面上的名称,但实际上很难仅突出显示用户名而不是突出显示用户名的整个范围。name_to_highlight下面是一个变量,用于保存所标识名称的字符串表示形式。
$( "span:contains('" + name_to_highlight + "')" ).contents().wrap( "<mark></mark>");
编辑: 多亏了响应,我得以更改代码,使其适用于任何网页。
// only highlight the child element containing name
var targets = $( "*:contains('" + name_to_highlight + "')" );
for(var i = 0; i < targets.length; i++ ){
if(targets[i].children.length < 1){
var spanText = targets[i].innerHTML;
// wrapping a name class around the date
targets[i].innerHTML = (spanText.replace(name_to_highlight, "<mark>" +
name_to_highlight + "</mark>"));
}
}
答案 0 :(得分:0)
您已经准备就绪,但是您正在将元素的全部内容包装在<mark>
标记中。确定元素后,您需要:
要做到这一点,您将需要进行一些字符串操作。 。 。类似于以下代码:
function highlightName(sName) {
var targetSpan = $("span:contains('" + sName + "')");
var spanText = targetSpan.text()
targetSpan.html(spanText.replace(sName, "<mark>" + sName + "</mark>"));
}
highlightName('John Smith');
highlightName('Jack Jones');
highlightName('Julie Jones');
mark {background-color: yellow;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><span>My name is John Smith and I am new here</span>.</p>
<p><span>My name is Jane Smith and I am a veteran user</span>.</p>
<p><span>My name is John Doe and I am the owner</span>.</p>
<p><span>My name is Jack Jones and I am new here</span>.</p>
<p><span>My name is Julie Jones and I am an amateur user</span>.</p>
注意::如果跨度中除了文本内容以外,还需要更新代码以保留HTML代码。现在,text()
方法将仅提取<span>
的文本内容,当用"html()
方法替换时,只有新添加的<mark>
标签会保留为子HTML元素。