☰

번호 HTML 제목

tag-icon • tag-icon linux script html
번호 HTML 제목

다음 구조를 포함하는 html 파일이 있습니다.

<h1 class="section">First title</h1>
  <div><h2 class="chapter">Chapter title</h2>
     Chapter text here.
  <div><h2 class="chapter">Chapter title</h2>
     Chapter text here.
  <div><h2 class="chapter">Chapter title</h2>
     Chapter text here.
<h1 class="section">Second title</h1>
  <div><h2 class="chapter">Chapter title</h2>
     Chapter text here.
  <div><h2 class="chapter">Chapter title</h2>
     Chapter text here.
  <div><h2 class="chapter">Chapter title</h2>
     Chapter text here.

다음과 같이 장 제목 앞에 숫자를 추가하고 싶습니다.

<h1 class="section">First title</h1>
  <div><h2 class="chapter">1. Chapter title</h2>
     Chapter text here.
  <div><h2 class="chapter">2. Chapter title</h2>
     Chapter text here.
  <div><h2 class="chapter">3. Chapter title</h2>
     Chapter text here.
<h1 class="section">Second title</h1>
  <div><h2 class="chapter">1. Chapter title</h2>
     Chapter text here.
  <div><h2 class="chapter">2. Chapter title</h2>
     Chapter text here.
  <div><h2 class="chapter">3. Chapter title</h2>
     Chapter text here.

헤더에 대한 카운터 재설정, 카운터 증가를 사용하여 CSS를 통해 장 번호를 삽입하려고 시도했지만 이는 특정 컨텍스트에서만 작동합니다.

class="section"을 검색한 다음 장 제목 앞에 숫자를 순차적으로 삽입할 수 있는 스크립트(python, perl, ???)가 있습니까?

실제 파일의 샘플은 다음과 같습니다.

<body><div class='root'><h1 class="section">Génesis</h1><div><h2
class="chapter">Dios ordena el universo</h2><div>01 En el principio,
cuando Dios creó los cielos y la tierra, </div><div>02 todo era
confusión y no había nada en la tierra. Las tinieblas cubrían los
abismos mientras el espíritu de Dios aleteaba sobre la superficie de
las ag [many lines here] </div><div><h2 class="chapter">Descanso del
séptimo día</h2><div>01 Así estuvieron [many lines here] <div
class='root'><h1 class="section">Éxodo</h1><div><h2 class="chapter">Los
hebreos se multiplican en Egipto</h2><div>01 Estos son los nombres de
los hijos de Israel que llegaron con Jacob a Egipto, cada uno con su
familia:</div><div>02 Rubén, Simeón, Leví, Judá,</div><div>03 Isacar,
[many lines here] etc, etc

답변1

편집하다

이제 귀하의 파일을 확인했는데 문제는 일반적인 줄 끝이 없다는 것입니다. 실제로 전체 파일이 하나의 긴 줄인 것처럼 보입니다. 맞습니까?

내 스크립트는 파일을 한 줄씩 구문 분석하는 것에 따라 달라집니다. 파일의 실제 형식에서는 줄이 무작위로 끊어진 것처럼 보이므로 구문 분석하기가 매우 어렵습니다. 물론, 조금은 정신없게 표현하면 오히려 설득력 있게 표현되었듯이여기, 정규식을 사용하여 HTML을 구문 분석하면 안 됩니다.

즉, 아래 스크립트는 귀하가 게시한 파일에서 작동합니다.

#!/usr/bin/perl 

my $file=<>; ## Load the file into memory
my $a=1;     ## Set up a counter

## Split the file on each occurence of
## 'class="chapter"' and save into the array @b
my @b=split(/class=.chapter.>/,$file);

## Print the beginning of the file
## and remove it from the array.
print shift(@b);

## Now, go through the array, adding the counter ($a)
## to each chapter heading.
foreach (@b) {
    ## Print 'class="chapter"', the counter and 
    ## the rest of the text until the next chapter heading
    print "class=\"chapter\">$a. $_"; 

    $a++;   ## Increment the counter
    $a=1 if /class="section"/; ## reset the counter
}

답변2

당신은 아마 사용할 수 있습니다<ol>~와 함께<li>?

해당 태그로 무엇을 하려는지 잘 모르겠지만 <a>챕터는 다음과 같이 보일 수 있습니다.

<ol>
  <li class="chapter">Chapter title</li>
  <li class="chapter">Chapter title</li>
  <li class="chapter">Chapter title</li>
</ol>

그리고 모든 새로운 요소 세트 <ol>는 번호 매기기를 재설정합니다.

답변3

CSS는 자동으로 번호를 매길 수도 있습니다.

a { counter-reset: section; }
h2:before {
    counter-increment: section;
    content: counter(section) ". ";
    display: inline;
}

관련 정보