JavaScript Regex To strip the html Tag with no attribute

Question

I have an Html String like NewText, With the use of JavaScript Regex i wanted to remove font tags with no attributes.

So the output of the above html string should be NewText

Below is the code, which helps me to strip all the font tags, But i am only require to strip font tags with no attribute.

var replace = new RegExp('<'+'font'+'[^><]*>|<.'+'font'+'[^><]*>','g')

var text    = '<font>New</font><font face="Akronim---Regular" color="#00ff00">Text</font>';

console.log(text.replace(replace, ''))

Thanks in advance.

Do you want to strip only the `font` tags or all the tags that do not have attributes? — ibrahim mahrir, Nov 11 '19 at 13:45
This will probably be closed as duplicate of this: https://stackoverflow.com/q/1732348/9867451 — ibrahim mahrir, Nov 11 '19 at 13:48
yes i want to strip all font tags with no attribute like color or face, even in nested it should be removed. — Rahil, Nov 11 '19 at 13:48
[Don't use a regex for this](https://stackoverflow.com/a/1732454/19068) — Quentin, Nov 11 '19 at 13:49
Don't use Regex for this kind of stuffs. You would be better by creating a DOM element (you don't have to attach it) and stripping out the elements that you don't want. — Kalesh Kaladharan, Nov 11 '19 at 13:57
if you're trying to do this from javascript, do you have access to the dom? if so, it would be way easier/cleaner/better to use `document.querySelectorAll('font:not([face])')` to get the elements you want and remove them from there — Andrew Ault, Nov 11 '19 at 13:57
i don't have an access to the DOM, As I am running it on node server — Rahil, Nov 11 '19 at 14:07

mplungjan · Answer 1 · 2019-11-11T14:12:22.167

2

Have a look at this. Do not use RegEx to manipulate HTML

The container could be created in memory if needed

On Node you can use https://www.npmjs.com/package/jsdom

document.querySelectorAll("font").forEach(f => {
  const parent = f.parentNode;
  if (f.attributes.length === 0) {
    if (f.innerHTML === "") { // remove empty fonts - we could do this before too
      parent.removeChild(f);
    } else {
      f.childNodes.forEach(child => parent.insertBefore(child.cloneNode(true), f));
      parent.removeChild(f);
    }
  }
});
console.log(document.getElementById("container").innerHTML)

<div id="container">
  <font>Hello
    <font face="Akronim---Regular">world</font>
  </font>
  <font></font>
  <font>New</font>
  <font face="Akronim---Regular" color="#00ff00">Text</font>
</div>

edited Nov 11 '19 at 14:12

answered Nov 11 '19 at 13:56

mplungjan

169,008
28
173
236

Great Thanks!, but still i don't have an access to DOM, I am running it on node server, having html string as `var text = 'NewText'; `. – Rahil Nov 11 '19 at 14:05
@Rahil then use something like [cheerio](https://cheerio.js.org/). – ibrahim mahrir Nov 11 '19 at 14:07

ibrahim mahrir · Accepted Answer · 2019-11-12T13:44:13.010

If you want to do it with a regex, you'll have to go tag by tag while keeping track of nesting levels so that you know when to remove a closing tag and when not.

To do so simply use an array that you constantly push/pop to/from it the type of the tag you encounter. When you encounter an opening tag, you push true if it has attributes and false if it doesn't, you then remove it if it doesn't have attributes. When you encounter a closing tag, you pop the type of the last encountered opening tag, if it had attributes (true), you skip to the next one, if it didn't have them (false) you remove it.

The regex should go over the opening and the closing tags in one run while giving us info about whether its a closing or an opening one and whether it has attributes or not. To do so we use regex like so <\/?font [^\s]*?>, we group (\/) and ([^\s]*?) because whether or not those groups get matched, we will know if it is a closing tag or not and if it has attributes or not respectively (for example, if we match the / then it's a closing tag). We add in the \s* to handle empty spaces and the resulting regex is /<(\/)?\s*font\s*([^\s]*?)\s*>/g.

Here is the function that does the job:

function stripEmptyFonts(htmlString) {
   var tagTypes = [];

   return htmlString.replace(/<(\/)?\s*font\s*([^\s]*?)\s*>/g, function(match, closingSlash, attributes) {
      if(!closingSlash) {                                  // if it is an opening tag (no '/' was matched)
         tagTypes.push(!!attributes);                      // push true to the array tagTypes if it has attributes, otherwise push false (attributes will either be a string or null, we use the double negation !! to convert it to a boolean)
         return attributes ? match : "";                   // remove it if it has no attributes, otherwise keep it as is (read the docs of String#replace method)
      } else {                                             // if it is a closing tag (a '/' was matched)
         return tagTypes.pop() ? match : "";               // if the last tag we encounterd had attributes (pop returned true) we skip this closing tag, otherwise (pop return false) we remove it
      }
   });
}

Example:

function stripEmptyFonts(htmlString) {
   var tagTypes = [];

   return htmlString.replace(/<(\/)?\s*font\s*([^\s]*?)\s*>/g, function(match, closingSlash, attributes) {
      if(!closingSlash) {
         tagTypes.push(!!attributes);
         return attributes ? match : "";
      } else {
         return tagTypes.pop() ? match : "";
      }
   });
}

var html = `
<font>New</font>
<font color="red">Hello <font>world</font>!</font>
<font>Hello <font color="blue">back</font>!</font>
<font>ABCD<font>EFGH<font color="black">IJKL<font>MNOP<font color="red">QRST</font>UVWX</font>YZ</font>1234</font>5678</font>`

console.log(stripEmptyFonts(html));

score 0 · Answer 3 · answered Nov 11 '19 at 14:25

if you have no access of DOM element then you can try this answer

<script>
let htmlString = '<font>Hello </font><font>New <font face="Akronim-Regular">world</font></font>';
let expoString = htmlString.split('<font>');
expoString = expoString.filter(function(el) {
  return el != null && el != "";
});
for (let i = 0; i < expoString.length; i++) {
  let startTag = expoString[i].split('<font').length - 1;
  let endTag = expoString[i].split('</font>').length - 1;
  for (let j = 1; j <= endTag - startTag; j++) {
    expoString[i] = expoString[i].replace('</font>', '');
  }
}
console.log(expoString.join('')); // here you can return string instead

JavaScript Regex To strip the html Tag with no attribute

3 Answers3