How to replace Text in html excluding tag properties?

Question

I am trying to add TradeMark sign ^TM next to the company name in the HTML.

Using below text:

<sup>TM</sup>

OR

&trade;

I have a rendered HTML, in which I have to add the trademark sign.

HTML:

Note: I have mentioned a small part of HTML body

<div class="col-md-3">
<div class="logo"><img src="/wp-content/uploads/2017/02/logo.png" 
onClick="window.location='https://www.walmart.com'" 
alt="Walmart Inc"  title="This is Walmart Inc for your help" style="pointer-events:all" />
</div></div>

<div class="submenu">
    <a href="/blog" target="_blank">Walmart Inc Blog</a>
    <a href="/blog" target="_blank">New Walmart Inc Products</a>
</div>
<meta itemprop="brand" content=" Walmart Inc"><p>Welcome to Walmart Inc.</p>

Tried below options:

$("body").children().each(function () {
    $(this).html($(this).html().replace(/Walmart Inc/g, "Walmart Inc&trade;"));
});

above option replaces "HTML tag properties' values" i.e. alt, title of img as well, which I don't want.

$("body").children().each(function () {
    $(this).html($(this).text().replace(/Walmart Inc/g, "Walmart Inc&trade;"));
});

& this results in removing all the HTML tags from the body.

How to exclude text inside the properties of Tags while replacing?

Desired Output:

<div class="col-md-3">
<div class="logo"><img src="/wp-content/uploads/2017/02/logo.png" 
onClick="window.location='https://www.walmart.com'" 
alt="Walmart Inc"  title="This is Walmart Inc for your help" style="pointer-events:all" />
</div></div>

<div class="submenu">
    <a href="/blog" target="_blank">Walmart Inc™ Blog</a>
    <a href="/blog" target="_blank">New Walmart Inc™ Products</a>
</div>
<meta itemprop="brand" content=" Walmart Inc"><p>Welcome to Walmart Inc™.</p>

You can use a css solution for this. In the HTML code add a Walmart Inc. And in css do this : .tradeMark::after { content: '&trade'; } — Kishan, Sep 11 '18 at 13:06
As there are hundreds of pages, adding `Walmart Inc` everywhere cannot be done. — Vikrant, Sep 11 '18 at 13:08
Have you tried this: https://stackoverflow.com/questions/25109275/jquery-replace-all-occurrences-of-a-string-in-an-html-page ??? — Mehdi Benmoha, Sep 11 '18 at 13:10
On your second solution variation, you are setting each element's html using `$.html()`, but the value you set it too is being taken from `$.text()`. I believe `$.text()` is stripping tags and treating them as plain text. — Freeman Lambda, Sep 11 '18 at 13:10
@FreemanLambda, tried that also, It throws text, which eliminates HTML completely & gives text output only — Vikrant, Sep 11 '18 at 13:12
Since this seems to be wordpress wouldn't it make more sense to do this in templates or database? — charlietfl, Sep 11 '18 at 13:13
Apology if it looks like WordPress, but these are static pages in an html5 project — Vikrant, Sep 11 '18 at 13:14

Sebastian Karlsson · Answer 1 · 2018-09-11T13:29:00.217

1

function insertTMAfter(name) {
    document.querySelectorAll('*').forEach(function(item){
        if(item.children.length == 0)
            item.innerHTML = item.innerHTML.replace(name, name + "&trade;");
    })
}

insertTMAfter("Stack Overflow");

// or in your case
insertTMAfter("Walmart Inc");

edited Sep 11 '18 at 13:29

answered Sep 11 '18 at 13:10

Sebastian Karlsson

715
1
8
19

1

`™` is an html entity and will not show as html if you use `innerText`. – charlietfl Sep 11 '18 at 13:11
Try it now! Thanks @Vikrant – Sebastian Karlsson Sep 11 '18 at 13:32
updated code is working fine as expected & it's minimal code. But it doesn't replace the text in *Div's* – Vikrant Sep 11 '18 at 13:59

charlietfl · Accepted Answer · 2018-09-11T13:54:13.567

0

Approach that only targets text nodes and replaces specific text node only with updated html. Will not affect attributes like alt, title etc

This will be superior to replacing larger blocks of html that may result in losing event listeners since you are only replacing text and no parent elements of that text

var term = "Walmart Inc";

$('body *:contains("' + term + '")')
  .not(':has(:contains("' + term + '"))')
  .contents().each(function() {
    // nodeType for text nodes is 3
    if (this.nodeType === 3 && this.textContent.includes(term)) {
      var html = this.textContent.replace(term, term + '&trade;')
      // replace text node with html
      $(this).replaceWith(html)
    }

  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
  <div class="logo"><img src="/wp-content/uploads/2017/02/logo.png" onClick="window.location='https://www.walmart.com'" alt="Walmart Inc" title="This is Walmart Inc for your help" style="pointer-events:all" />
  </div>
</div>

<div class="submenu">
  <a href="/blog" target="_blank">Walmart Inc Blog</a>
  <a href="/blog" target="_blank">New Walmart Inc Products</a>
</div>
<meta itemprop="brand" content=" Walmart Inc">
<p>Welcome to Walmart Inc.</p>

edited Sep 11 '18 at 13:54

answered Sep 11 '18 at 13:39

charlietfl

170,828
13
121
150

Your code is working as expected. It excludes html tags. – Vikrant Sep 11 '18 at 13:53
Only place it might not work is a parent that has the standalone text that has a child with it also. Not sure if that will occur or not. Like `
Walmart
Walmart
` – charlietfl Sep 11 '18 at 14:01
Got it. For now, I don't have such case in my HTML, so overall it's working as expected – Vikrant Sep 11 '18 at 14:02
If it was me I would consider doing a text replace in the files. Can use a regex to find instances that are only inside tags – charlietfl Sep 11 '18 at 14:04
That's the practice I also will prefer gladly. But I am not allowed to access the database. – Vikrant Sep 11 '18 at 14:07
And also, your solution works only for the first occurrence of text inside a tag – Vikrant Sep 11 '18 at 14:08
1

Ok.. can convert it to a regex within `replace()` and add `g` flag for multiples – charlietfl Sep 11 '18 at 14:09

How to replace Text in html excluding tag properties?

HTML:

Tried below options:

Desired Output:

2 Answers2