Å trekke ut Tekst fra Innhold ved Hjelp av HTML-Spor, HTML-Mal og Skygge DOM

0
34

Kapittel navn i bøker, sitater fra en tale, søkeord i en artikkel, statistikk på en rapport — disse er alle typer innhold som kan være nyttig for å isolere og slå inn i en high-nivå sammendrag av hva som er viktig.

For eksempel, har du sett den måten Business Insider gir en artikkel er viktige poeng før du får inn i innholdet?

Det er den slags ting vi kommer til å gjøre, men prøve å trekke den høye poeng direkte fra artikkelen ved hjelp av HTML-Spor, HTML-Mal og Skygge DOM.

Disse tre titulær spesifikasjoner er vanligvis brukt som en del av Web-Komponenter — fullt fungerende tilpasset element moduler ment å være gjenbrukt i nettsider.

Nå, hva vi ønsker å gjøre, dvs. tekst utvinning, ikke trenger tilpassede elementer, men det kan gjøre bruk av de tre teknologiene.

Det er en mer enkel tilnærming til å gjøre dette. For eksempel, vi kunne trekke ut tekst, og vise hentet tekst på en side med litt basic-skript uten å benytte spor og mal. Så hvorfor bruke dem hvis vi kan gå med noe mer kjent?

Årsaken er at ved hjelp av disse teknologiene tillater oss en forhåndsinnstilt markup-kode (eventuelt også, stil eller et skript) for våre hentet tekst i HTML. Vi vil se at når vi går videre med denne artikkelen.

Nå, som en svært uttynnede definisjon av teknologiene som vi skal bruke, vil jeg si:

  • En mal er et sett av markup som kan gjenbrukes i en side.
  • En spilleautomat er en plassholder stedet for et eget element fra siden.
  • En skygge DOM er et DOM-treet som ikke egentlig eksisterer på siden til vi legge det ved hjelp av skript.

Vi vil se dem i en litt mer i dybden når vi får inn koding. For nå, hva vi kommer til å gjøre er en artikkel som følger med en liste over viktige poeng fra teksten. Og, har du sannsynligvis gjettet det, er de viktigste punktene er hentet fra artikkelen tekst og samlet inn de viktigste punktene delen.

Se Penn
Tekst Utvinning med HTML-Spor og HTML-Mal ved Preethi Sam (@rpsthecoder)
på CodePen.

De viktigste punktene er vist som en liste med design i mellom punktene. Så, la oss først lage en mal for at listen , og angi en plass på listen til å gå.

<artikkel><!– Artikkel innhold –></article>

<!– Seksjon hvor den utpakkede keypoints vil bli vist –>
<delen id=’keyPointsSection’>
<h2> – Tasten Poeng:</h2>
<ul><!– Hentet viktige punkter vil gå inn her –></ul>
</avsnitt>

<!– Mal for de viktige poengene liste –>
<mal id=’keyPointsTemplate’>
<li><slot name=’keyPoints’></slot></li>
<li style=”text-align: center;”>&#x2919;&mdash;&#x291a;</li>
</template>

Det vi har er en semantisk <section> med <ul> hvor listen over viktige poeng vil gå. Da har vi en <mal> for listen elementer som har to <li> – elementer: ett med en <slot> plassholder for hovedpunkter fra artikkelen og en annen med en sentrert design.

Oppsettet er vilkårlig. Det som er viktig er å plassere en <slot> hvor den utpakkede viktige punkter vil gå. Uansett hva som er inni <mal> vil ikke bli gjengitt på side før vi legger det til side ved hjelp av skript.

Videre markup i <mal> kan være utformet ved hjelp av innebygde stiler, eller CSS omsluttet av <style>:

<mal id=’keyPointsTemplate’>
<li><slot name=’keyPoints’></slot></li>
<li style=”text-align: center;”>&#x2919;&mdash;&#x291a;</li>
<style>
li{/* Noen stil */}
</style>
</template>

Den morsomme delen! La oss plukke de viktigste punktene fra artikkelen. Legg merke verdien av attributtet name for <slot> i <mal> (keyPoints) fordi vi trenger det.

<artikkel>
<h1>Bjørner</h1>
<p>Bjørner er carnivoran pattedyr av familien Ursidae. <span><span spilleautomat=’keyPoints’>De er klassifisert som caniforms, eller doglike carnivorans</span></span>. Selv om bare åtte arter av bjørn <!– mer innhold –> og delvis i den Sørlige Halvkule. <span><span spilleautomat=’keyPoints’>Bjørner er funnet på store deler av Nord-Amerika, Sør-Amerika, Europa og Asia</span></span>.<!– mer innhold –></p>
<p>Mens isbjørnen er for det meste kjøtt, <!– mer innhold –>. Bjørn bruk minimum av fem stjerner, slik som grotter og logger, som hulene sine; <span><span spilleautomat=’keyPoints’>de Fleste arter okkupere hulene sine i løpet av vinteren for en lang periode av dvalemodus</span></span>, opp til 100 dager.</p>
<!– Flere avsnitt –>
</article>

De viktigste punktene er pakket inn i en <span> å bære en spilleautomat attributt verdi (“keyPoints”) matchende navnet på <slot> plassholder inne i <mal>.

Merker også at jeg har lagt til en annen ytre <span> innpakning viktige poeng.

Årsaken er at spilleautomat navn er vanligvis unike og er ikke gjentatt, fordi en <slot> samsvarer med ett element ved hjelp av en spilleautomat navn. Hvis det er mer enn ett element med samme spor navn, <slot> plassholder vil bli erstattet av alle de elementer etter hverandre, slutter i det siste elementet som blir det endelige innholdet i plassholderen.

Så, hvis vi matchet at en enkelt <slot> i <mal> mot alle <span> – elementer med samme slot-attributt-verdi (våre key points) i et avsnitt eller hele artikkelen, vil vi ende opp med bare den siste sentralt punkt finnes i avsnitt eller artikkelen i stedet for <slot>.

Det er ikke det vi trenger. Vi trenger å vise alle de viktigste punktene. Så, vi er innpakning viktige poeng med en ytre <span> for å matche hver av de enkelte viktige punkter separat med <slot>. Dette er mye mer tydelig ved å se på manuset, så la oss gjøre det.

const keyPointsTemplate = – dokument.querySelector(‘#keyPointsTemplate’).innhold;
const keyPointsSection = – dokument.querySelector(‘#keyPointsSection > ul’);
/* Loop gjennom elementer med “slot” – attributtet */
dokumentet.querySelectorAll(‘[spor]’).forEach((spor)=>{
la span = spilleautomat.parentNode.cloneNode(true);
span.attachShadow({ modus: ‘lukket’ }).appendChild(keyPointsTemplate.cloneNode(true));
keyPointsSection.appendChild(span);
});

Først skal vi gå gjennom alle <span> med en spilleautomat attributt og få en kopi av sine foreldre (den ytre <span>). Merk at vi også kunne gå gjennom den ytre <span> direkte hvis vi ønsker, ved å gi dem en felles klasse verdi.

Den ytre <span> kopier deretter festet med en skygge treet (span.attachShadow) består av en klone av malens innhold (keyPointsTemplate.cloneNode(true)).

Denne “vedlegg” årsaker <slot> i malen er listen element i skyggen treet til å absorbere den indre <span> med sine matchende spilleautomat navn, dvs. våre viktigste punktet.

Den slissede sentrale punkt er deretter lagt til de viktigste punktene avsnitt på slutten av siden (keyPointsSection.appendChild(span)).

Dette skjer med alle de viktigste punktene i løpet av loopen.

Det er virkelig om den. Vi har snagged alle de viktigste punktene i artikkelen, laget kopier av dem, så droppet den kopier i listen mal, slik at alle de sentrale poeng er gruppert sammen for å tilby en fin liten CliffsNotes-som oppsummering av artikkelen.

Her er det demo igjen:

Se Penn
Tekst Utvinning med HTML-Spor og HTML-Mal ved Preethi Sam (@rpsthecoder)
på CodePen.

Hva synes du om denne teknikken? Er det noe som ville være nyttig i lang-form, innhold, som blogger, nyheter, artikler, eller til og med Wikipedia-bidrag? Hva andre tilfeller kan du tenke på?