如何仅突出显示HTML元素的某些单词?

时间:2019-05-21 19:13:56

标签: javascript jquery html google-chrome-extension

我正在创建一个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>"));
     }
   }

1 个答案:

答案 0 :(得分:0)

您已经准备就绪,但是您正在将元素的全部内容包装在<mark>标记中。确定元素后,您需要:

  1. 将内容拉出,
  2. 具体定位名称并将其包装在标签中,然后
  3. 用更新的版本替换现有内容

要做到这一点,您将需要进行一些字符串操作。 。 。类似于以下代码:

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元素。