How to add html tags before and after certain string using jquery

Question

I have the following HTML:

<h5 class="pi-accordion-title">
    <a href="#" class="z">
        <span class="pi-accordion-toggle"></span>
            My Link (Keyword)
    </a>
</h5>

which is part of an accordion link. What I am trying to do is to open span tag before the (Keyword) and close it after that.

I am trying with the following JAVASCRIPT:

<script>
    $("(Keyword)").before("<span class='orange'>"); 
    $("(Keyword)").after("</span>");         
</script>

but it doesn't work...Console log show the following error:Syntax error, unrecognized expression: (Keyword)

WIth your code you will have to update the innerHTML of the anchor a — progrAmmar
– progrAmmar, Commented Jun 3, 2016 at 2:01
@progrAmmar I don't want to add html code in my database. My link is dynamically pulled from the database. And I have different words in (Keyword) so I will place span with different classes depending from the word. — user2417624
– user2417624, Commented Jun 3, 2016 at 2:06

Deep · Accepted Answer · 2016-06-03 02:08:49Z

1

$('.pi-accordion-title').each(function() {
    this.innerHTML = this.innerHTML.replace(/(\(Keyword\))/, '<span class="orange">$1</span>');
});

answered Jun 3, 2016 at 2:08

Deep

2,5442 gold badges17 silver badges27 bronze badges

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

3 Comments

user2417624 Over a year ago

Strange, but no span has been inserted...should I use body on load or something?

user2417624 Over a year ago

Yes, I can see that here, but it doesn't work on my computer, I will restart it, I can't see any other obvious reason why this is not working on my side.

Quentin Roy Over a year ago

"should I use body on load or something" is most likely true.

Quentin Roy · Accepted Answer · 2016-06-03 04:27:21Z

1

You cannot select text like this with jQuery. Here is a very simple way to do it which does not even need jQuery.

The drawback of this approach is that the entire content of the container is re-written, which means that if you want to attach event to some children of the container, you have to do it after you inserted the spans. As a result, I would recommend to choose a container as small as possible.

var toReplace = '(Keyword)'; var containers = document.getElementsByClassName("pi-accordion-title"); Array.prototype.forEach.call(containers, function(container){ container.innerHTML = container.innerHTML.replace(toReplace, '$&'); });

.pi-accordion-title a span {
  color:red;
}

<h5 class="pi-accordion-title">
    <a href="#" class="z">
        <span class="pi-accordion-toggle"></span>
            My Link (Keyword)
    </a>
</h5>

EDIT

If you want to avoid the aforementioned element overwriting drawback, you can leverage the ":contains" jQuery selector. If you are using jQuery I actually think it is the best/safest method as you will only re-write the parent elements.

var toReplace = '(Keyword)';
$(":contains(" + toReplace + ")").each(function(){
  this.innerHTML = this.innerHTML.replace(toReplace, '<span>$&</span>');
});

.pi-accordion-title a span {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5 class="pi-accordion-title">
    <a href="#" class="z">
        <span class="pi-accordion-toggle"></span>
            My Link (Keyword)
    </a>
</h5>

edited Jun 3, 2016 at 4:27

answered Jun 3, 2016 at 2:04

Quentin Roy

7,9172 gold badges34 silver badges52 bronze badges

5 Comments

user2417624 Over a year ago

This code produces an error which is : TypeError: container is null

Quentin Roy Over a year ago

You should be using an old/odd browser that oddly does not support document.body. Here is a new version using getElementsByClassName. If your browser does not support this, I cannot help you :).

user2417624 Over a year ago

I don't know what is wrong, but no span is inseted before or after (Keyword) in my browser. I check it with Firefox, Chrome and Opera, nothing...all my browsers are up to date

Quentin Roy Over a year ago

Try to wrap your code in a $(function(){ \* code here *\ }); wrapper (or window.addEventListener("load", function(){ \* code here *\ });). This problem would also explain the document.body === null problem.

Quentin Roy Over a year ago

You need to make sure that your page is loaded before attempting any operation on your DOM. If your script is inserted at the beginning of the page (e.g. the header), it is executed before the page is loaded.

Jack jdeoel · Accepted Answer · 2016-06-03 03:28:35Z

0

I have tried with jquery.Grab the class name and get the text or html ,then you can replace by .replace with find word

var title = $(".pi-accordion-title");
var text = title.html();
title.html(text.replace(/(\(Keyword\))/g,"<span class='orange'>$&</span>"));

answered Jun 3, 2016 at 3:28

Jack jdeoel

4,5886 gold badges28 silver badges57 bronze badges

Collectives™ on Stack Overflow

How to add html tags before and after certain string using jquery

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related