Remove whitespace between table tags

-2

I need a regex (or another nice solution) that will match whitespace only between tags inside a table. My current regex will match whitespace between all tags.

const result = `

<div>

  <table class="foo">

    <tr>

      <td>

        Lorem ipsum

      </td>

    </tr>

    <tr>

      <td>

        Dolor

      </td>

    </tr>

  </table>

</div>

`.replace(/>s+</g, '><');

I want to achieve this:

<div>

  <table class="foo"><tr><td>Lorem ipsum</td></tr><tr><td>Dolor</td></tr></table>

</div>

edited Dec 31 '18 at 15:09

asked Dec 31 '18 at 13:48

Ben Besuijen

317417

I can see what you're trying to do, but can I ask as to why you're trying to do that?

– JO3-W3B-D3V
Dec 31 '18 at 13:58

In React i'm converting a string to a JSX element. But when there are whitespace characters it will give an error: whitespace text nodes cannot appear as a child of <table>. I don't want to affect all other elements outside the the table.

– Ben Besuijen
Dec 31 '18 at 14:04

If your trying to minify your code there are lots of off the shelf minifiers around, using regex to parse HTML leads to madness

– Liam
Dec 31 '18 at 14:06

Here are a couple of resources to help with that, i.pinimg.com/originals/f4/e8/35/…, pics.me.me/…, s3.amazonaws.com/websitebeaver/blog/…

– shanks
Dec 31 '18 at 14:09

Parsing HTML with regex is hard job

– Toto
Dec 31 '18 at 14:58

add a comment |

-2

I need a regex (or another nice solution) that will match whitespace only between tags inside a table. My current regex will match whitespace between all tags.

const result = `

<div>

  <table class="foo">

    <tr>

      <td>

        Lorem ipsum

      </td>

    </tr>

    <tr>

      <td>

        Dolor

      </td>

    </tr>

  </table>

</div>

`.replace(/>s+</g, '><');

I want to achieve this:

<div>

  <table class="foo"><tr><td>Lorem ipsum</td></tr><tr><td>Dolor</td></tr></table>

</div>

edited Dec 31 '18 at 15:09

asked Dec 31 '18 at 13:48

Ben Besuijen

317417

I can see what you're trying to do, but can I ask as to why you're trying to do that?

– JO3-W3B-D3V
Dec 31 '18 at 13:58

In React i'm converting a string to a JSX element. But when there are whitespace characters it will give an error: whitespace text nodes cannot appear as a child of <table>. I don't want to affect all other elements outside the the table.

– Ben Besuijen
Dec 31 '18 at 14:04

If your trying to minify your code there are lots of off the shelf minifiers around, using regex to parse HTML leads to madness

– Liam
Dec 31 '18 at 14:06

Here are a couple of resources to help with that, i.pinimg.com/originals/f4/e8/35/…, pics.me.me/…, s3.amazonaws.com/websitebeaver/blog/…

– shanks
Dec 31 '18 at 14:09

Parsing HTML with regex is hard job

– Toto
Dec 31 '18 at 14:58

add a comment |

-2

I need a regex (or another nice solution) that will match whitespace only between tags inside a table. My current regex will match whitespace between all tags.

const result = `

<div>

  <table class="foo">

    <tr>

      <td>

        Lorem ipsum

      </td>

    </tr>

    <tr>

      <td>

        Dolor

      </td>

    </tr>

  </table>

</div>

`.replace(/>s+</g, '><');

I want to achieve this:

<div>

  <table class="foo"><tr><td>Lorem ipsum</td></tr><tr><td>Dolor</td></tr></table>

</div>

edited Dec 31 '18 at 15:09

asked Dec 31 '18 at 13:48

Ben Besuijen

317417

I need a regex (or another nice solution) that will match whitespace only between tags inside a table. My current regex will match whitespace between all tags.

const result = `

<div>

  <table class="foo">

    <tr>

      <td>

        Lorem ipsum

      </td>

    </tr>

    <tr>

      <td>

        Dolor

      </td>

    </tr>

  </table>

</div>

`.replace(/>s+</g, '><');

I want to achieve this:

<div>

  <table class="foo"><tr><td>Lorem ipsum</td></tr><tr><td>Dolor</td></tr></table>

</div>

javascript regex

edited Dec 31 '18 at 15:09

asked Dec 31 '18 at 13:48

Ben Besuijen

317417

edited Dec 31 '18 at 15:09

asked Dec 31 '18 at 13:48

Ben Besuijen

317417

edited Dec 31 '18 at 15:09

asked Dec 31 '18 at 13:48

Ben Besuijen

317417

asked Dec 31 '18 at 13:48

Ben Besuijen

317417

asked Dec 31 '18 at 13:48

Ben Besuijen

317417

I can see what you're trying to do, but can I ask as to why you're trying to do that?

– JO3-W3B-D3V
Dec 31 '18 at 13:58

In React i'm converting a string to a JSX element. But when there are whitespace characters it will give an error: whitespace text nodes cannot appear as a child of <table>. I don't want to affect all other elements outside the the table.

– Ben Besuijen
Dec 31 '18 at 14:04

If your trying to minify your code there are lots of off the shelf minifiers around, using regex to parse HTML leads to madness

– Liam
Dec 31 '18 at 14:06

Here are a couple of resources to help with that, i.pinimg.com/originals/f4/e8/35/…, pics.me.me/…, s3.amazonaws.com/websitebeaver/blog/…

– shanks
Dec 31 '18 at 14:09

Parsing HTML with regex is hard job

– Toto
Dec 31 '18 at 14:58

add a comment |

I can see what you're trying to do, but can I ask as to why you're trying to do that?

– JO3-W3B-D3V
Dec 31 '18 at 13:58

In React i'm converting a string to a JSX element. But when there are whitespace characters it will give an error: whitespace text nodes cannot appear as a child of <table>. I don't want to affect all other elements outside the the table.

– Ben Besuijen
Dec 31 '18 at 14:04

If your trying to minify your code there are lots of off the shelf minifiers around, using regex to parse HTML leads to madness

– Liam
Dec 31 '18 at 14:06

Here are a couple of resources to help with that, i.pinimg.com/originals/f4/e8/35/…, pics.me.me/…, s3.amazonaws.com/websitebeaver/blog/…

– shanks
Dec 31 '18 at 14:09

Parsing HTML with regex is hard job

– Toto
Dec 31 '18 at 14:58

I can see what you're trying to do, but can I ask as to why you're trying to do that?

– JO3-W3B-D3V
Dec 31 '18 at 13:58

In React i'm converting a string to a JSX element. But when there are whitespace characters it will give an error: whitespace text nodes cannot appear as a child of <table>. I don't want to affect all other elements outside the the table.

– Ben Besuijen
Dec 31 '18 at 14:04

If your trying to minify your code there are lots of off the shelf minifiers around, using regex to parse HTML leads to madness

– Liam
Dec 31 '18 at 14:06

Here are a couple of resources to help with that, i.pinimg.com/originals/f4/e8/35/…, pics.me.me/…, s3.amazonaws.com/websitebeaver/blog/…

– shanks
Dec 31 '18 at 14:09

Parsing HTML with regex is hard job

– Toto
Dec 31 '18 at 14:58

add a comment |

1 Answer
1

active

oldest

votes

Explanation

This isn't quite a regular expression solution, however I feel that it's actually a more simplistic solution, feel free to provide feedback.

With this solution, considering that you want to target table tags specifically, I think that this should suffice?

let words = ['Lorum ipsum', 'Dolor'];

let result = `

<div>

  <table class="foo" id="demo" style="">

    <tr>

      <td>

        words[0]

      </td>

    </tr>

    <tr>

      <td>

        words[1]

      </td>

    </tr>

  </table>

</div>

`;



let newResult = '';



const cleanseString = str => {

  const attributes = ['id', 'class', 'style']; // etc ...

  str = str.replace(/s/g, '');

  const index = str.replace(/D/g, '');

  const marker = `words[${index}]`;



  if (str.indexOf(marker) >= 0) {

    str = str.replace(marker, words[index]);

  }



  attributes.forEach(attr => {

    if (str.indexOf(attr) >= 0) {

      let start = '',

        end = '';

      start = str.substring(0, str.indexOf(attr));

      end = str.substring(str.indexOf(attr), str.length);

      str = start + " " + end;

    }

  });



  return str;

};



result.split("<").forEach(str => {

  str = cleanseString(str);



  if (str != '') {

    if (str.indexOf("/table") >= 0) newResult += "<" + str + 'n';

    else if (str.indexOf('table') >= 0) newResult += 'nt' + "<" + str;

    else newResult += "<" + str;

  }

});



//console.clear();

console.log(newResult);

edited Dec 31 '18 at 16:37

answered Dec 31 '18 at 14:12

JO3-W3B-D3V

1,487420

Nice! almost there. It will output <tableclass="foo"> I can try to fix this :)

– Ben Besuijen
Dec 31 '18 at 14:37

@BenBesuijen I've updated my answer, I think it now works as you'd expect?

– JO3-W3B-D3V
Dec 31 '18 at 15:13

Thanks for your help. I can use your solution

– Ben Besuijen
Dec 31 '18 at 15:18

@BenBesuijen No worries, glad I could be of some help! :)

– JO3-W3B-D3V
Dec 31 '18 at 15:24

1

The space between Lorem and ipsum has disapeared. Not that is wanted.

– Toto
Dec 31 '18 at 16:10

|
show 1 more comment

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53988210%2fremove-whitespace-between-table-tags%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Explanation

This isn't quite a regular expression solution, however I feel that it's actually a more simplistic solution, feel free to provide feedback.

With this solution, considering that you want to target table tags specifically, I think that this should suffice?

let words = ['Lorum ipsum', 'Dolor'];

let result = `

<div>

  <table class="foo" id="demo" style="">

    <tr>

      <td>

        words[0]

      </td>

    </tr>

    <tr>

      <td>

        words[1]

      </td>

    </tr>

  </table>

</div>

`;



let newResult = '';



const cleanseString = str => {

  const attributes = ['id', 'class', 'style']; // etc ...

  str = str.replace(/s/g, '');

  const index = str.replace(/D/g, '');

  const marker = `words[${index}]`;



  if (str.indexOf(marker) >= 0) {

    str = str.replace(marker, words[index]);

  }



  attributes.forEach(attr => {

    if (str.indexOf(attr) >= 0) {

      let start = '',

        end = '';

      start = str.substring(0, str.indexOf(attr));

      end = str.substring(str.indexOf(attr), str.length);

      str = start + " " + end;

    }

  });



  return str;

};



result.split("<").forEach(str => {

  str = cleanseString(str);



  if (str != '') {

    if (str.indexOf("/table") >= 0) newResult += "<" + str + 'n';

    else if (str.indexOf('table') >= 0) newResult += 'nt' + "<" + str;

    else newResult += "<" + str;

  }

});



//console.clear();

console.log(newResult);

edited Dec 31 '18 at 16:37

answered Dec 31 '18 at 14:12

JO3-W3B-D3V

1,487420

Nice! almost there. It will output <tableclass="foo"> I can try to fix this :)

– Ben Besuijen
Dec 31 '18 at 14:37

@BenBesuijen I've updated my answer, I think it now works as you'd expect?

– JO3-W3B-D3V
Dec 31 '18 at 15:13

Thanks for your help. I can use your solution

– Ben Besuijen
Dec 31 '18 at 15:18

@BenBesuijen No worries, glad I could be of some help! :)

– JO3-W3B-D3V
Dec 31 '18 at 15:24

1

The space between Lorem and ipsum has disapeared. Not that is wanted.

– Toto
Dec 31 '18 at 16:10

|
show 1 more comment

Explanation

This isn't quite a regular expression solution, however I feel that it's actually a more simplistic solution, feel free to provide feedback.

With this solution, considering that you want to target table tags specifically, I think that this should suffice?

let words = ['Lorum ipsum', 'Dolor'];

let result = `

<div>

  <table class="foo" id="demo" style="">

    <tr>

      <td>

        words[0]

      </td>

    </tr>

    <tr>

      <td>

        words[1]

      </td>

    </tr>

  </table>

</div>

`;



let newResult = '';



const cleanseString = str => {

  const attributes = ['id', 'class', 'style']; // etc ...

  str = str.replace(/s/g, '');

  const index = str.replace(/D/g, '');

  const marker = `words[${index}]`;



  if (str.indexOf(marker) >= 0) {

    str = str.replace(marker, words[index]);

  }



  attributes.forEach(attr => {

    if (str.indexOf(attr) >= 0) {

      let start = '',

        end = '';

      start = str.substring(0, str.indexOf(attr));

      end = str.substring(str.indexOf(attr), str.length);

      str = start + " " + end;

    }

  });



  return str;

};



result.split("<").forEach(str => {

  str = cleanseString(str);



  if (str != '') {

    if (str.indexOf("/table") >= 0) newResult += "<" + str + 'n';

    else if (str.indexOf('table') >= 0) newResult += 'nt' + "<" + str;

    else newResult += "<" + str;

  }

});



//console.clear();

console.log(newResult);

edited Dec 31 '18 at 16:37

answered Dec 31 '18 at 14:12

JO3-W3B-D3V

1,487420

Nice! almost there. It will output <tableclass="foo"> I can try to fix this :)

– Ben Besuijen
Dec 31 '18 at 14:37

@BenBesuijen I've updated my answer, I think it now works as you'd expect?

– JO3-W3B-D3V
Dec 31 '18 at 15:13

Thanks for your help. I can use your solution

– Ben Besuijen
Dec 31 '18 at 15:18

@BenBesuijen No worries, glad I could be of some help! :)

– JO3-W3B-D3V
Dec 31 '18 at 15:24

1

The space between Lorem and ipsum has disapeared. Not that is wanted.

– Toto
Dec 31 '18 at 16:10

|
show 1 more comment

Explanation

This isn't quite a regular expression solution, however I feel that it's actually a more simplistic solution, feel free to provide feedback.

With this solution, considering that you want to target table tags specifically, I think that this should suffice?

let words = ['Lorum ipsum', 'Dolor'];

let result = `

<div>

  <table class="foo" id="demo" style="">

    <tr>

      <td>

        words[0]

      </td>

    </tr>

    <tr>

      <td>

        words[1]

      </td>

    </tr>

  </table>

</div>

`;



let newResult = '';



const cleanseString = str => {

  const attributes = ['id', 'class', 'style']; // etc ...

  str = str.replace(/s/g, '');

  const index = str.replace(/D/g, '');

  const marker = `words[${index}]`;



  if (str.indexOf(marker) >= 0) {

    str = str.replace(marker, words[index]);

  }



  attributes.forEach(attr => {

    if (str.indexOf(attr) >= 0) {

      let start = '',

        end = '';

      start = str.substring(0, str.indexOf(attr));

      end = str.substring(str.indexOf(attr), str.length);

      str = start + " " + end;

    }

  });



  return str;

};



result.split("<").forEach(str => {

  str = cleanseString(str);



  if (str != '') {

    if (str.indexOf("/table") >= 0) newResult += "<" + str + 'n';

    else if (str.indexOf('table') >= 0) newResult += 'nt' + "<" + str;

    else newResult += "<" + str;

  }

});



//console.clear();

console.log(newResult);

edited Dec 31 '18 at 16:37

answered Dec 31 '18 at 14:12

JO3-W3B-D3V

1,487420

Explanation

This isn't quite a regular expression solution, however I feel that it's actually a more simplistic solution, feel free to provide feedback.

With this solution, considering that you want to target table tags specifically, I think that this should suffice?

let words = ['Lorum ipsum', 'Dolor'];

let result = `

<div>

  <table class="foo" id="demo" style="">

    <tr>

      <td>

        words[0]

      </td>

    </tr>

    <tr>

      <td>

        words[1]

      </td>

    </tr>

  </table>

</div>

`;



let newResult = '';



const cleanseString = str => {

  const attributes = ['id', 'class', 'style']; // etc ...

  str = str.replace(/s/g, '');

  const index = str.replace(/D/g, '');

  const marker = `words[${index}]`;



  if (str.indexOf(marker) >= 0) {

    str = str.replace(marker, words[index]);

  }



  attributes.forEach(attr => {

    if (str.indexOf(attr) >= 0) {

      let start = '',

        end = '';

      start = str.substring(0, str.indexOf(attr));

      end = str.substring(str.indexOf(attr), str.length);

      str = start + " " + end;

    }

  });



  return str;

};



result.split("<").forEach(str => {

  str = cleanseString(str);



  if (str != '') {

    if (str.indexOf("/table") >= 0) newResult += "<" + str + 'n';

    else if (str.indexOf('table') >= 0) newResult += 'nt' + "<" + str;

    else newResult += "<" + str;

  }

});



//console.clear();

console.log(newResult);

let words = ['Lorum ipsum', 'Dolor'];

let result = `

<div>

  <table class="foo" id="demo" style="">

    <tr>

      <td>

        words[0]

      </td>

    </tr>

    <tr>

      <td>

        words[1]

      </td>

    </tr>

  </table>

</div>

`;



let newResult = '';



const cleanseString = str => {

  const attributes = ['id', 'class', 'style']; // etc ...

  str = str.replace(/s/g, '');

  const index = str.replace(/D/g, '');

  const marker = `words[${index}]`;



  if (str.indexOf(marker) >= 0) {

    str = str.replace(marker, words[index]);

  }



  attributes.forEach(attr => {

    if (str.indexOf(attr) >= 0) {

      let start = '',

        end = '';

      start = str.substring(0, str.indexOf(attr));

      end = str.substring(str.indexOf(attr), str.length);

      str = start + " " + end;

    }

  });



  return str;

};



result.split("<").forEach(str => {

  str = cleanseString(str);



  if (str != '') {

    if (str.indexOf("/table") >= 0) newResult += "<" + str + 'n';

    else if (str.indexOf('table') >= 0) newResult += 'nt' + "<" + str;

    else newResult += "<" + str;

  }

});



//console.clear();

console.log(newResult);

let words = ['Lorum ipsum', 'Dolor'];

let result = `

<div>

  <table class="foo" id="demo" style="">

    <tr>

      <td>

        words[0]

      </td>

    </tr>

    <tr>

      <td>

        words[1]

      </td>

    </tr>

  </table>

</div>

`;



let newResult = '';



const cleanseString = str => {

  const attributes = ['id', 'class', 'style']; // etc ...

  str = str.replace(/s/g, '');

  const index = str.replace(/D/g, '');

  const marker = `words[${index}]`;



  if (str.indexOf(marker) >= 0) {

    str = str.replace(marker, words[index]);

  }



  attributes.forEach(attr => {

    if (str.indexOf(attr) >= 0) {

      let start = '',

        end = '';

      start = str.substring(0, str.indexOf(attr));

      end = str.substring(str.indexOf(attr), str.length);

      str = start + " " + end;

    }

  });



  return str;

};



result.split("<").forEach(str => {

  str = cleanseString(str);



  if (str != '') {

    if (str.indexOf("/table") >= 0) newResult += "<" + str + 'n';

    else if (str.indexOf('table') >= 0) newResult += 'nt' + "<" + str;

    else newResult += "<" + str;

  }

});



//console.clear();

console.log(newResult);

edited Dec 31 '18 at 16:37

answered Dec 31 '18 at 14:12

JO3-W3B-D3V

1,487420

edited Dec 31 '18 at 16:37

answered Dec 31 '18 at 14:12

JO3-W3B-D3V

1,487420

answered Dec 31 '18 at 14:12

JO3-W3B-D3V

1,487420

answered Dec 31 '18 at 14:12

JO3-W3B-D3V

1,487420

Nice! almost there. It will output <tableclass="foo"> I can try to fix this :)

– Ben Besuijen
Dec 31 '18 at 14:37

@BenBesuijen I've updated my answer, I think it now works as you'd expect?

– JO3-W3B-D3V
Dec 31 '18 at 15:13

Thanks for your help. I can use your solution

– Ben Besuijen
Dec 31 '18 at 15:18

@BenBesuijen No worries, glad I could be of some help! :)

– JO3-W3B-D3V
Dec 31 '18 at 15:24

1

The space between Lorem and ipsum has disapeared. Not that is wanted.

– Toto
Dec 31 '18 at 16:10

|
show 1 more comment

Nice! almost there. It will output <tableclass="foo"> I can try to fix this :)

– Ben Besuijen
Dec 31 '18 at 14:37

@BenBesuijen I've updated my answer, I think it now works as you'd expect?

– JO3-W3B-D3V
Dec 31 '18 at 15:13

Thanks for your help. I can use your solution

– Ben Besuijen
Dec 31 '18 at 15:18

@BenBesuijen No worries, glad I could be of some help! :)

– JO3-W3B-D3V
Dec 31 '18 at 15:24

1

The space between Lorem and ipsum has disapeared. Not that is wanted.

– Toto
Dec 31 '18 at 16:10

Nice! almost there. It will output <tableclass="foo"> I can try to fix this :)

– Ben Besuijen
Dec 31 '18 at 14:37

@BenBesuijen I've updated my answer, I think it now works as you'd expect?

– JO3-W3B-D3V
Dec 31 '18 at 15:13

Thanks for your help. I can use your solution

– Ben Besuijen
Dec 31 '18 at 15:18

@BenBesuijen No worries, glad I could be of some help! :)

– JO3-W3B-D3V
Dec 31 '18 at 15:24

The space between Lorem and ipsum has disapeared. Not that is wanted.

– Toto
Dec 31 '18 at 16:10

|
show 1 more comment

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk