/    Sign up×
Community /Pin to ProfileBookmark

Need help builing a code

Copy linkTweet thisAlerts:
Jul 22.2013

Hi Guys,

I’m currently working on a website with a lot of pages and one of the annoying part is to add <section> tag in front of every single header.

I was wondering if it’s possible to populate all the section tags using JavaScript but since it all depends on what heading number it is, the <section> tag may change

For instance :

[CODE]<section>
<h1>Heading1</h1>

<section>
<h2>Heading2</h2>

</section>
<section>
<h2>Heading2</h2>

<section>
<h3>Heading3</h3>

</section>
</section>
<section>
<h2>Heading2</h2>
</section>
</section>[/CODE]

As you can see it’s not always the same, and only section is used, no article or anything

I have no idea where to begin with…

Any ideas?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@AirbladerJul 22.2013 — This is definitely something where I'd advise not to use Javascript as there is absolutely no benefit. If it's too annoying to add the tags by hand, do it automated in your editor, but not on the client's computer everytime he opens the page. Javascript can be used to automate similar tasks, but shouldn't be used to do what you forgot to do earlier.
Copy linkTweet thisAlerts:
@RickGervsauthorJul 22.2013 — This is definitely something where I'd advise not to use Javascript as there is absolutely no benefit. If it's too annoying to add the tags by hand, do it automated in your editor, but not on the client's computer everytime he opens the page. Javascript can be used to automate similar tasks, but shouldn't be used to do what you forgot to do earlier.[/QUOTE]

Sorry I should have been clearer. I want to build some kind of application with a text area that I paste my code in; and when a press a button it populates the tags for me.

I already have a JavaScript tool that automatically populates a lot of things, but not section tags.

Thanks
Copy linkTweet thisAlerts:
@AirbladerJul 22.2013 — Please avoid crossposting in multiple forums. I'll answer in the other one from now on.
Copy linkTweet thisAlerts:
@TcobbJul 23.2013 — That's a very interesting puzzle. I don't guarantee that this will work for you, but here's a shot:

[CODE]<!DOCTYPE HTML>
<html><head><title>Test</title>

<script>
function col2arr(col){
var i, len, ret = [];
len = col.length;
for(i = 0; i < len;i++){
ret.push(col[i]);
}
return ret;
}

function insertArt(el, tag){
var i, len, set, flag, art;
set = col2arr(el.childNodes);
len = set.length;
flag = false;
for(i = 0; i < len; i++){
if(set[i].tagName == tag){
flag = true;
art = document.createElement('section');
el.insertBefore(art, set[i]);
}
if(!flag){
continue;
}
el.removeChild(set[i]);
art.appendChild(set[i]);
}
}

window.onload = function(){

var i, len, j, jLen, blocks, header = ['H2','H3','H4'];
//create the "seed"
len = header.length;
insertArt(document.body,'H1');
for(i = 0; i < len; i++){
blocks = document.getElementsByTagName('section');
blocks = col2arr(blocks);
jLen = blocks.length;
for(j = 0; j < jLen; j++){
insertArt(blocks[j], header[i]);
}
}
alert(document.body.innerHTML);
}
</script>
</head>
<body>
<h1>Heading1</h1>
<h2>Heading2</h2>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h2>Heading2</h2>
</body></html>[/CODE]

It uses the same HTML code you provided sans the SECTION tags.

Good Luck!
Copy linkTweet thisAlerts:
@wbportJul 23.2013 — This "do it yourself" text was created to modify a text form of music notation, but you should be able to adapt it to work with [B]html[/B]. The framework splits lines of text into an array of strings where your [B]for[/B] loop can do anything you want before recreating and selecting the text area.

At any rate replace [CODE]<h[/CODE] with [CODE]</section>n<section>n<h[/CODE] in a [B]for[/B] loop and it should do everything you need except an "end section" will need to be moved.

Do it yourself.txt
×

Success!

Help @RickGervs spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...