javascript: searching text including html and changing its css style

Question

I am trying to make a simple chrome extension, which can find a text in a webpage and make it bold. When I find a simple text, it works, however, it does not work when an original text includes html tag.

Here are my codes,

$("p:contains(" + "like apple" + )").html(
  function( _ , html ) {
    return html.split("like apple").join("<b>" + "like apple" + "/b>");
  }
)

For example, if I find word "like apple", in I like apple, it becomes I like apple.

However, for I like apple, the code can not find the words "like apple" because of .

How can I fix the code, which can find a text including html tags and change its css style?

Ercan Peker · Accepted Answer · 2018-10-02 07:56:14Z

1

test if text contains html elements if it has, strip html element to get text.

var text='like <span>apple<span/>'

if(/<[a-z][\s\S]*>/i.test(text)){
var stripped_text=strip(text);
}

function strip(html)
{
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}

answered Oct 2, 2018 at 7:56

Ercan Peker

1,66212 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

darklightcode · Accepted Answer · 2018-10-02 07:54:56Z

0

I adjusted it for multiple text replacements:

var customText = ['like apples', 'more apples'];

customText.forEach(function(item){

  $("p:contains(" +item +")").html(
    function( _ , html ) {
      return html.split(item).join("<b>" + item + "</b>");
    }
  )

})

<p>I like apples therefore i will buy more apples today.</p>

answered Oct 2, 2018 at 7:54

darklightcode

2,7721 gold badge16 silver badges19 bronze badges

Collectives™ on Stack Overflow

javascript: searching text including html and changing its css style

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related