Add text to div where to find something

Question

I have a div with id content . I want to find My Company div in this, and then add after the My Company brand symbol ® anywhere where it appears in the div id = content . The problem is that My Company text is not always in HTML as My Company . It can be My <span style="something">C</span>ompany or My <font color="something">C</font>ompany , and I don’t know how to add the symbol ® after the text My Company , even if it contains html tags (as above).

I want to do this using JS / JQuery. Thank you very much.

I tried:

 $("#content").each(function() { var text = $(this).text(); text = text.replace("My Company", "My Company®"); $(this).text(text); }); 

but it only works if it is My Company NOT when it is My <span style="something">C</span>ompany or My <font color="something">C</font>ompany

EDIT

I have one (one) div #content

Example

 <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et nisl quam. Praesent semper enim elit, vel imperdiet ipsum vulputate ac. Curabitur lacinia vitae metus sit amet consectetur. My Company Sed metus risus, iaculis a erat id, pretium congue nisi. Phasellus tempor, massa lobortis scelerisque pharetra, orci metus ultrices quam, eu sodales massa erat ut ipsum. Vestibulum ullamcorper interdum pretium. My <span style="color: orange;">C</span>ompany Praesent mollis in ex in feugiat. Ut vitae placerat diam. </div> 

Answer 1

Use classes if you want to have multiple sections with the same style on the page.

 $("#content").each(function() { var text = $(this).html(); text = text.replace(/My Company/g, "My Company<sup>®</sup>"); text = text.replace(/My (<\/?span[^>]*>C\<\/span\>ompany)/g, "My Company<sup>®</sup>"); text = text.replace(/My (<\/?font[^>]*>C\<\/font\>ompany)/g, "My Company<sup>®</sup>"); $(this).html(text); }); 

Answer 2

Here is how you can do it.

 $(function(){ $('#content').each(function() { var text = $(this).text(); $(this).text(text.replace('My Company', 'My Company®')); }); }); 

EDIT:

Maybe the updated code will work if you want to save HTML as well

 $(function(){ var children = $('#content').children(); children.each(function() { var text = $.trim($(this).text()); if(text === 'My Company'){ var getTagName = $(this).prop("tagName"); var tagName = getTagName.toLowerCase(); var replaceText = '<'+tagName+'>'+'My Company®'+'</'+tagName+'>'; $(this).html(replaceText); } }); }); 

Check out the updated script http://jsfiddle.net/69sv52y2/16/

Answer 3

Hi, can you add how is it right?

 $("#content").each(function() { var text = $(this).text(); if(text === 'My Company') { $(this).append('<span class="copyrightSymbol"> ® </span>'); } }); 

It will work. But #content is only allowed once per page, as it is an identifier.

Answer 4

try it

 $("#content").each(function() { var text = $(this).text(); text = text.replace(/My Company/g, "My Company®"); $(this).text(text); }); 

The earlier step you took was right, but you missed the global replacement. jQuery text() will only get the text part inside the div tag. So no need to worry about internal tags that wrap themselves.

JSFiddle: https://jsfiddle.net/srb8fusn/

Answer 5

You encountered this problem due to several spaces between my company If the div has a <span> , then I think your HTML looks something like this: <div class='content'> My <span> Company </span></div> , so there are two spaces between My and Company , and your line replacement does not work for this.

So, first you need to replace several spaces with one space.

Work for these conditions too

 My <font color="something">C</font>ompany My <span style="something">C</span>ompany 

Secondly, if you use multiple dives , you should use class instead of id

Try this code:

 $(".content").each(function() { var text = $(this).text(); console.log(text); text = text.replace(/ +(?= )/g,'').replace(/My Company/g, "My Company®"); $(this).text(text); }); 

DEMO: http://jsfiddle.net/ishandemon/e9t7wjo8/

Answer 6

You need to first remove the HTML tags around "My Content", if any.

Then, in plain text, find it.

And if found, you can add a trademark at the end.

This will also preserve the original "MY CONTENT" HTML markup.

CONDITION: YOU SHOULD HAVE ONE “MY CONTENT” inside the div #content

WORKING FIDDLE

CODE

Basically, I will create an HTML strip feature to remove additional HTML tags around the text, and then do a search as shown below.

 $(function(){ $('#content').each(function() { var text = $(this).html(); console.log(text); console.log(stripHTML(text)); if(stripHTML(text).indexOf("My Company")>-1) { alert("FOUND"); $(this).html($(this).html() + "®"); } }); function stripHTML(dirtyString) { var container = document.createElement('div'); container.innerHTML = dirtyString; return container.textContent; } });