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>
It is no longer simple to add overwrite style?
– Costamilam
I have many dynamic classes, so there’s no way I could know each of them... this is a minimalist example of the problem.
– Ivan Ferrer
The problem with the code is that the
replace
does not change the variable, only returns the new value, must be changed tovalue.textContent = value.textContent.replace(...)
– Costamilam
Wasn’t it simpler to replace in the original string? Why convert to DOM tree if you will convert back to string before rewinding?
– bfavaretto
Thanks @Costamilam, I think that was the problem.
– Ivan Ferrer
@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– Costamilam