Javascript - Remove content between two HTML tags

Solved
sipherion Posted messages 1836 Registration date   Status Membre Last intervention   -  
sipherion Posted messages 1836 Registration date   Status Membre Last intervention   -
Hello hello !

So here's my little problem. Despite the superb explanations available on CCM at this address https://www.commentcamarche.net/contents/585-javascript-l-objet-regexp, I can't achieve what I want in JavaScript.

I am retrieving the HTML content of a DIV from my page in JavaScript. In this DIV, I have a <table></table> that I don't need to retrieve since it corresponds to the display of a calendar, and I'm looking for a way to remove it.

I admit I have no knowledge of regular expressions and since I’ve been working on this since Friday afternoon, I'm completely stuck.

My current code which of course doesn’t work:

^[(<TABLE)].*(TABLE>)$

The final goal is to have something in JavaScript like this:

reg = new RegExp("^[(<TABLE)].*(TABLE>)$");
document.form.message_bdd.value = document.form.message_bdd.value.replace(reg, '');

Thank you in advance for the help you can provide me with ;-)

--
If your problem is resolved, please close the topic by clicking on "Problem resolved".
Network administrator on Windows Server 2003

4 réponses

[Dal] Posted messages 6205 Registration date   Status Contributeur Last intervention   1 108
 
Hello sipherion,

You can use a regex in the String replace() method.

Something like this:

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<p>Click the button to clear the table</p>
<table border="1">
<tr>
<th>Monday</th>
<th>Tuesday</th>
</tr>
<tr>
<td>Booked</td>
<td>Also booked</td>
</tr>
</table>
</div>

<button onclick="myFunction()">Clear</button>

<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace(/<table[\s\S]*\/table>/,"");
document.getElementById("demo").innerHTML=n;
}
</script>

</body>
</html>


Dal
1
sipherion Posted messages 1836 Registration date   Status Membre Last intervention   287
 
Great, that works perfectly, I just needed that expression. Thank you very much, Dal!
0
[Dal] Posted messages 6205 Registration date   Status Contributeur Last intervention   1 108
 
You're welcome, a little addition:

The regex
/<table[\s\S]*\/table>/
will match multiple tables if you have more than one in your div, as the regex will go up to the last "/table>". If that’s not an issue for you, that's fine, otherwise you'll need to match a bit more (does this "table" have an id?), or you can use a "?" specifier like this
/<table[\s\S]*?\/table>/
instead, so that the regexp is non-greedy and just matches the first table (if that’s the one you’re targeting).


Dal
1
sipherion Posted messages 1836 Registration date   Status Membre Last intervention   287
 
The content of my DIV will actually be sent to a page that will send an HTML email. I have another table inside, but it should also be removed, so everything is fine ;-)
At worst, in the future, could I use something like
/(<table id='1')[\s\S]*\/table>
to clearly identify a table?
0
ThEBiShOp Posted messages 9307 Registration date   Status Contributeur Last intervention   1 605
 
I reiterate my question: https://forums.commentcamarche.net/forum/affich-28935506-javascript-supprimer-contenu-entre-deux-balises-html#7

Why bother with a regex when jQuery makes it easy to manipulate any element on the page and the elements it contains?
0
[Dal] Posted messages 6205 Registration date   Status Contributeur Last intervention   1 108
 
@ThEBiShOp :

jQuery is great, but if he’s not already using it, it creates a dependency. When we use jQuery, we tend to become skewed and forget that (or we don’t take the time to ask ourselves if) we can do things quite simply without it.

He didn't say that his table had an id or a class. I assumed that the div has one (because he says he retrieves the content from it).

His primary goal was to delete the table retrieved in a JavaScript variable, not to remove it from the displayed page (for the sake of the demo, that’s what my code does to show the result of the substitution in the variable, but it’s just for illustration purposes).

@sipherion : in that case
/(<table id='1')[\s\S]*?\/table>/


Dal

Edit : missing closing slash
0
jeannets Posted messages 28341 Registration date   Status Contributeur Last intervention   Ambassadeur 6 597
 
1° Remove the HTML code and the 2 TAB tags, and try in the browser to see if it works well without these tags.

2° At this point, insert your JavaScript code, making sure to include the JS tags.

You can do this with a helper tool like DreamWeaver or simply with Notepad.

If you need JS support, you can consult: http://www.editeurjavascript.com/cours/cours_02.php

It's not too complicated, but I can't write your code for you.
0
sipherion Posted messages 1836 Registration date   Status Membre Last intervention   287
 
I don't understand your response, Jeannets. Do you think I have no knowledge of programming? Sorry if that's what you thought when reading my message, I might have expressed myself poorly, but it's okay, I'm managing just fine ^^

My problem is with the RegExp function! I want to replace the content of a JS variable that I declare by retrieving the innerHTML of a DIV while removing everything between <table and </table>.

--
If your problem is solved, please close the topic by clicking on "Problem solved".
Network administrator under Windows Server 2003
0
jeannets Posted messages 28341 Registration date   Status Contributeur Last intervention   6 597
 
Sorry, well yes, I thought you were starting out when I read your post...

And I won't be able to help you on that point... It's a shot in the dark.
0
ThEBiShOp Posted messages 9307 Registration date   Status Contributeur Last intervention   1 605
 
Probably a stupid question, but why not use jQuery instead of messing around with a regex?

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function myFunction()
{
$('#demo table').html('');
}
</script>
0
sipherion Posted messages 1836 Registration date   Status Membre Last intervention   287
 
Thank you for your proposal, but indeed it is not relevant here ;-)
0
ThEBiShOp Posted messages 9307 Registration date   Status Contributeur Last intervention   1 605
 
May I ask you why?
0
sipherion Posted messages 1836 Registration date   Status Membre Last intervention   287
 
- In my case, the ID depends on a previous selection; in fact, the ID is retrieved via a variable defined by
document.form.idDivTemp.value
(which gives
document.form.message_bdd.value = document.getElementById(document.form.idDivTemp.value).innerHTML;
)
- This solution only works with one table whereas in this DIV there are two.
- It may happen in some cases that we need to modify our selection without reloading the page. If you remove the HTML code, the table does not display anymore. Therefore, it needs to be removed in the temporary variable before being sent to the processing page.

But otherwise, it works very well, I tested your solution, it will be useful to me in some cases ;-)
0
ThEBiShOp Posted messages 9307 Registration date   Status Contributeur Last intervention   1 605
 
The jQuery selector can be built however you like to manipulate any DOM element, to delete it, hide it, or add anything to it.

My example was simply based on [Dal]'s answer, but fortunately, we can do many other things, and in my opinion, it's easier to manipulate than a regex.
0
sipherion Posted messages 1836 Registration date   Status Membre Last intervention   287
 
It's possible, now the simplest for me, who is learning JS gradually, is to start mastering the basic functions and then consider moving on to jQuery.
0