How to remove a style font from a string using DOM manipulation?

Asked

Viewed 52 times

0

I’m getting the following HTML from an API:

  <body>
     <div class="container">
      <style>
        .g-aiPstyle0 {
            font-family: 'Sentinel SSm A', 'Sentinel SSm B', serif;
            font-size: 16px;
            line-height: 25px;
            font-weight: 400;
            font-style: normal;
            color: #323232;
        }
    </style>
      <div class="g-aiPstyle0">NOnono nono onon nonono</div>
       </div>
   </body>

It comes all with a string, I would like to take this string and treat using DOM manipulation, so that I can remove from the element <style>, the attribute and its source value: font-family: 'Sentinel SSm A', 'Sentinel SSm B', serif;;

<script>
   function removeFontSentinel(result) {
        var result = $sce.trustAsHtml(result);
            var el = document.createElement('div');
            el.innerHTML = result;
            var query = el.querySelectorAll('style')
            .forEach(function(value) {
                value.textContent.replace(/font\-family\: (\')?Sentinel(.*)serif(\;)?/gim, '');
            });
       result = el.innerHTML;
       return result; 
   }
</script>
javascript html angularjs

  • It is no longer simple to add overwrite style?

  • I have many dynamic classes, so there’s no way I could know each of them... this is a minimalist example of the problem.

  • 2

    The problem with the code is that the replace does not change the variable, only returns the new value, must be changed to value.textContent = value.textContent.replace(...)

  • Wasn’t it simpler to replace in the original string? Why convert to DOM tree if you will convert back to string before rewinding?

  • Thanks @Costamilam, I think that was the problem.

  • @bfavaretto believe this mode is better because it gives the guarantee that the changed code will always be within a tag style, will someone put a text of a CSS code as content of the HTML page

Show 1 more comment

2 answers

0


Here’s the solution that worked:

function removeFontSentinel(result) {
    var el = document.createElement('div');
    el.innerHTML = result;
    el.querySelectorAll('style')
    .forEach(function(value) {
        if(value.textContent.indexOf('Sentinel') != -1 || value.textContent.indexOf('Gotham') != -1 || value.textContent.indexOf('nyt-franklin') != -1) {
            value.textContent = value.textContent.replace(/font\-family\:\'Sentinel(.*)(\'\, \'Sentinel[.*]?\')?\, serif\;/gim, '');
            value.textContent = value.textContent.replace(/font\-family\:\'Gotham(.*)\'\, \'Gotham Rounded SSm B\'\, sans-serif\;/gim, '');
            value.textContent = value.textContent.replace(/font\-family\:nyt-franklin(.*)?\;/gim, '');
        }
    });
    result = el.innerHTML;
    return result; 
}

-1

Whoa, your problem is actually something very simple!

Well, you’re getting an element and passing it to HTML inside a DIV, right?

So you just say that el.style.fontFamily = '[a fonte que você quer]'

Anyway, you won’t be able to avoid much having some established source. If you want your element to be invisible, just point out that el.style.display = 'none'.

That’s it, I hope I helped.

Browser other questions tagged javascript html angularjs

You are not signed in. Login or sign up in order to post.