使用JavaScript从文本中提取突出显示的关键字，并将其显示在旁边列表中

Question

所以，我试图在旁边创建一个小的关键字列表，但我做错了。虽然，我写了代码，但我是JavaScript语言的新手，这段代码看起来有点压倒性，我找不到我的错误。请有人伸出援助之手！我发布了代码的链接，在这里发布了代码，而且我发布了两个截图，说明页面应该如何看，以及我现在拥有的截图（基本上什么都没有）。

注意：我将三个CSS文件合并为一个，因为我不知道如何制作三个单独的工作表。

未来目标

当前状态

https://jsfiddle.net/dqndz3vh/

＆＃13;

＆＃13;

"use strict";

/*
   New Perspectives on HTML5, CSS3 and JavaScript 6th Edition
   Tutorial 12
   Review Assignment

   Author: Martin Evtimov
   Date: 04-22-2018

   Filename: bc_keys.js

   Functions
   =========
   
   findKeyWords()
      Locate the keywords in the article indicated by the <dfn> tag
      and add those keywords in alphabetical order to a keyword box.
      
   makeKeyStyles()
      Create an embedded style sheet for the keyword box.

      
   replaceWS(textStr)
      Replaces occurences of one or more consecutive white space
      characters with the _ character.

*/
window.addEventListener("load", findKeyWords);

window.addEventListener("load", makeKeyStyles);


function findKeyWords() {
      var keywords = document.createElement("aside");

      var mainHeading = document.createElement("h1");
      var headingText = document.createTextNode("Keywords List");
      var orderList = document.createElement("ol");

      mainHeading.appendChild(headingText);
      keywords.appendChild(mainHeading);
      keywords.appendChild(orderList);

      var keyWordElems = document.getElementById("doc").querySelectorAll("dfn");
      var keyWords = keyWordElems.length;

      for(var i = 0; keyWordElems.length; i++) {
            keyWords +=  keyWordElems[i];

            var linkID = replace(keyWords);
            
            keyWordElems[i] = keyWords + "_" + linkID;
      }

      keyWords.shadowRoot(function(a, b){return a - b});

      for (var i = 0; i < keyWords.length; i++) {
            var keyWordListItem = document.createElement("li");
            var keyWordLink = document.createElement("a");
            keyWordLink.innerHTML = keyWords[i];
            linkID = replace(keyWords);
            keyWordLink.setAttribute("id", keyWords[i] + linkID);
            keyWordListItem.appendChild(KeyWordLink);
            orderList.appendChild(keyWordListItem);

      }

      keywords.firstChild("article#doc");

}

function makeKeyStyles() {
      var embeddedStyles = document.createElement("style");
      document.head.appendChild(embeddedStyles);

      document.styleSheets[document.styleSheets.length-1].insertRule("aside#keywords { \
            border: 3px solid rgb(101, 101, 101); \
            float: right; \
            margin: 20px 0px 20px 20px; \
            padding: 10px; \
            width: 320px; \
        }", 0);

        document.styleSheets[document.styleSheets.length-1].insertRule("aside#keywords h1 { \
            font-size: 2em; \
            margin: 5px; \
            text-align: center; \
        }", 1);

        document.styleSheets[document.styleSheets.length-1].insertRule("aside#keywords ol { \
            font-size: 20px; \
            font-size: 1.2em; \
        }", 2);

        document.styleSheets[document.styleSheets.length-1].insertRule("aside#keywords ol li { \
            line-height: 1.5em; \
        }", 3);
        
        document.styleSheets[document.styleSheets.length-1].insertRule("aside#keywords ol li a { \
            color: rgb(101, 101, 101); \
            text-decoration: none; \
        }", 4);
}




/* Supplied Functions */

function replaceWS(textStr) {
   var revText = textStr.replace(/\s+/g,"_");
   return revText;
}

＆＃13;

@charset "utf-8";

/*
   
   Filename: bc_styles.css
   

*/


/* HTML and Body Styles */

   

html {
   background: rgb(251, 246, 237);
   height: 100%;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 12px;
}

body {
   width: 100%;
   max-width: 1100px;
   margin: 0px auto;
   color: rgb(51, 51, 51);
   background-color: rgb(248, 238, 222);
   box-shadow: inset 0px 0px 35px rgba(51, 51, 51, 0.6); 
}
   
/* Body Header Styles */

body > header {
   width: 100%;
}

body > header > img {
   display: block;
   width: 100%;
}

/* Horizonal Navigation Styles */

nav.horizontal {
   background-color: rgb(147, 114, 88);
}

nav.horizontal ul {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
   padding: 5px 0px 5px 20px;
}

nav.horizontal li {
   color: white;
   font-size: 1.1em;
   line-height: 1.4em;
   display: block;
   margin-right: 12px; 
}



nav.horizontal ul li a:visited, nav.horizontal ul li a:link {
  color: white;
}

nav.horizontal ul li a:hover, nav.horizontal ul li a:active {
  text-decoration: underline;
  color: rgb(255, 255, 191);
}

/* H1 Styles */

body > h1 {
   font-size: 2.5em;
   margin: 20px 0px;
   width: 100%;
   text-align: center;
   line-height: 1.1em;
}

/* Article Styles */

article {
   -webkit-flex: 3 1 300px;
   flex: 3 1 300px;
   font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
   padding: 0px 40px 20px 20px;
}

article > h1 {
   font-size: 2.2em;
   line-height: 2.2em;
   font-weight: bold;
   margin: 25px 0px 10px;
   border-top: 1px solid rgb(101, 101, 101);
   padding-top: 10px;
}

article > h2 {
   font-size: 1.6em;
   font-weight: bold;
   line-height: 1.6em;
   margin: 25px 0px 10px;
}

article > h3 {
   font-size: 1.4em;
   line-height: 1.4em;
   font-weight: bold;
   margin: 5px 0px 5px 25px;
}

article p {
   font-size: 1.4em;
   line-height: 1.5em;
   margin: 5px 0px 8px 25px;
   text-align: justify;
}



article p:first-of-type:first-line {
   font-variant: small-caps;
}

article p:first-of-type:first-letter {
   float: left; 
   font-size: 300%;
   font-family: 'Times New Roman', Times, serif; 
   line-height: 0.8; 
   margin-right: 5px
}

article dfn {
   color: rgba(84,101,147,1.00);
   font-weight: bold;
   font-style: normal;
   font-size: 1.1em;
   background-color: rgba(255,255, 101, 0.6);
}

/* Footer Styles */

body > footer {
   background-color: rgb(147, 114, 88);
   color: rgb(241, 241, 241);
   font-size: 0.9em;
   text-align: center;
   padding: 10px 0px;
   width: 100%;
}

body > footer a {
   color: white;
}

/*
   
   Filename: bc_base.css

*/


/* Basic styles to be used with all devices and under all conditions */

article, aside, figcaption, figure,
footer, header, main, nav, section { 
   display: block;
}

address, article, aside, blockquote, body, cite, 
div, dl, dt, dd, em, figcaption, figure, footer, 
h1, h2, h3, h4, h5, h6, header, html, img, 
li, main, nav, nav a, ol, p, section, span, ul {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;  
}


/* Set the default page element styles */

body {
   line-height: 1.2em;
}

ul, ol {
   list-style: none;
}

nav ul {
   list-style: none;
   list-style-image: none;
}

nav a {
   text-decoration: none;
}



/*

   Filename: bc_keys.css
   

*/


aside#keywords {
   float: right;
   width: 320px;
   margin: 20px 0px 20px 20px;
   border: 1px solid rgb(101, 101, 101);
   padding: 10px;
}

aside#keywords h1 {
   font-size: 2em;
   margin: 5px;
   text-align: center;
}

aside#keywords ol {
   margin-left: 20px;
   font-size: 1.2em;
}

aside#keywords ol li {
   line-height: 1.5em;
}

aside#keywords ol li a {
   text-decoration: none;
   color: rgb(101, 101, 101);
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
   <!--
   
   Federalist Paper 10
   Author: Martin Evtimov 
   Date: 04-22-2018 
   
   Filename: bc_fed.html
   -->
   
   <title>Federalist Paper #10</title>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />

   <link href="bc_base.css" rel="stylesheet" />
   <link href="bc_styles.css" rel="stylesheet"   /> 
   
   <script src="bc_keys.js" async></script>
</head>

<body>
   <header>
      <img src="bc_logo.png" alt="Bridger College" />
      <nav class="horizontal">
         <ul>
            <li><a href="#">Bridger College </a> &#9658; </li>
            <li><a href="#">Dept. of History </a> &#9658; </li>
            <li><a href="#">History 308 </a> &#9658; </li>
            <li><a href="#">Documents </a> &#9658; </li>
            <li><a href="#">Federalist 10</a></li>
         </ul>
      </nav>
   </header>
     
   <article id="doc">
      <h1>The Federalist Papers No. 10</h1>

      <h2>The Union as a Safeguard Against 
         Domestic Faction and Insurrection<br />
         From the New York Packet. Friday, November 23, 1787.
      </h2>

      <h3>To the people of the state of New York:</h3>
      <p>Among the numerous advantages promised by a well-constructed 
         Union, none deserves to be more accurately developed than its 
         tendency to break and control the violence of faction. The friend of 
         popular governments never finds himself so much alarmed for their 
         character and fate, as when he contemplates their propensity to this 
         dangerous vice. He will not fail, therefore, to set a due value on any 
         plan which, without violating the principles to which he is attached, 
         provides a proper cure for it. The instability, injustice, and 
         confusion introduced into the public councils, have, in truth, been the 
         mortal diseases under which popular governments have everywhere perished; 
         as they continue to be the favorite and fruitful topics from which the 
         adversaries to liberty derive their most specious declamations. The 
         valuable improvements made by the American constitutions on the popular 
         models, both ancient and modern, cannot certainly be too much admired; 
         but it would be an unwarrantable partiality, to contend that they have 
         as effectually obviated the danger on this side, as was wished and 
         expected. Complaints are everywhere heard from our most considerate 
         and virtuous citizens, equally the friends of public and private 
         faith, and of public and personal liberty, that our governments are 
         too unstable, that the <dfn>public good</dfn> is disregarded in the conflicts of 
         rival parties, and that measures are too often decided, not according to 
         the rules of justice and the rights of the minor party, but by the superior 
         force of an interested and overbearing majority. However anxiously we may 
         wish that these complaints had no foundation, the evidence, of known facts 
         will not permit us to deny that they are in some degree true. It will be 
         found, indeed, on a candid review of our situation, that some of the 
         distresses under which we labor have been erroneously charged on the 
         operation of our governments; but it will be found, at the same time, 
         that other causes will not alone account for many of our heaviest 
         misfortunes; and, particularly, for that prevailing and increasing 
         distrust of public engagements, and alarm for private rights, which 
         are echoed from one end of the continent to the other. These must be 
         chiefly, if not wholly, effects of the unsteadiness and injustice 
         with which a factious spirit has tainted our public administrations.
      </p>

      <p>By a <dfn id="firstkey">faction</dfn>, I understand a number of 
         citizens, whether amounting to a majority or a minority of the whole, 
         who are united and actuated by some common impulse of passion, or of 
         interest, adversed to the rights of other citizens, or to the permanent 
         and aggregate interests of the community.</p>

      <p>There are two methods of curing the mischiefs of faction: the one, by 
         removing its causes; the other, by controlling its effects.
      </p>

      <p>There are again two methods of removing the causes of faction: the one, 
         by destroying the liberty which is essential to its existence; the other, 
         by giving to every citizen the same opinions, the same passions, and 
         the same interests. 
      </p>

      <p>It could never be more truly said than of the first remedy, that it 
         was worse than the disease: <dfn>liberty</dfn> is to faction what air is 
         to fire, an aliment without which it instantly expires. But it could not 
         be less folly to abolish liberty, which is essential to political life, 
         because it nourishes faction, than it would be to wish the annihilation 
         of air, which is essential to animal life, because it imparts to fire 
         its destructive agency. </p>

      <p>The second expedient is as impracticable as the first would be unwise. 
         As long as the <dfn>reason of man</dfn> continues fallible, and he is 
         at liberty to exercise it, different opinions will be formed. As long 
         as the connection subsists between his reason and his self-love, his 
         opinions and his passions will have a reciprocal influence on each other; 
         and the former will be objects to which the latter will attach 
         themselves. The diversity in the faculties of men, from which the 
         <dfn>rights of property</dfn> originate, is not less an insuperable 
         obstacle to a uniformity of interests. The protection of these faculties 
         is the first object of government. From the protection of different 
         and unequal faculties of acquiring property, the possession of 
         different degrees and kinds of property immediately results; and from 
         the influence of these on the sentiments and views of the respective 
         proprietors, ensues a division of the society into different 
         interests and parties. </p>

      <p>The latent causes of faction are thus sown in the nature of man; and 
         we see them everywhere brought into different degrees of activity, 
         according to the different circumstances of civil society. A zeal 
         for different opinions concerning religion, concerning government, 
         and many other points, as well of speculation as of practice; an 
         attachment to different leaders ambitiously contending for 
         pre-eminence and power; or to persons of other descriptions whose 
         fortunes have been interesting to the human passions, have, in turn, 
         divided mankind into parties, inflamed them with mutual animosity, 
         and rendered them much more disposed to vex and oppress each other 
         than to co-operate for their common good. So strong is this propensity 
         of mankind to fall into mutual animosities, that where no substantial 
         occasion presents itself, the most frivolous and fanciful distinctions 
         have been sufficient to kindle their unfriendly passions and excite 
         their most violent conflicts. But the most common and durable source 
         of factions has been the various and <dfn>unequal distribution of 
         property</dfn>. Those who hold and those who are without property 
         have ever formed distinct interests in society. Those who are 
         <dfn>creditors</dfn>, and those who are <dfn>debtors</dfn>, fall 
         under a like discrimination. A landed interest, a manufacturing 
         interest, a mercantile interest, a moneyed interest, with many lesser 
         interests, grow up of necessity in civilized nations, and divide them 
         into different classes, actuated by different sentiments and views. 
         The regulation of these various and interfering interests forms the 
         principal task of modern legislation, and involves the spirit of party 
         and faction in the necessary and ordinary operations of the government.
      </p> 

      <p>It is in vain to say that <dfn>enlightened statesmen</dfn> will be 
         able to adjust these clashing interests, and render them all 
         subservient to the public good. Enlightened statesmen will not always 
         be at the helm. Nor, in many cases, can such an adjustment be made at 
         all without taking into view indirect and remote considerations, 
         which will rarely prevail over the immediate interest which one 
         party may find in disregarding the rights of another or the good of 
         the whole.
      </p>

      <p>The inference to which we are brought is, that the causes of faction 
         cannot be removed, and that relief is only to be sought in the means of 
         controlling its effects. </p>

      <p>If a faction consists of less than a majority, relief is supplied by 
         the <dfn>republican principle</dfn>, which enables the majority to 
         defeat its sinister views by regular vote. It may clog the 
         administration, it may convulse the society; but it will be unable 
         to execute and mask its violence under the forms of the Constitution. 
         When a majority is included in a faction, the form of 
         <dfn>popular government</dfn>, on the other hand, enables it to 
         sacrifice to its ruling passion or interest both the public good and 
         the rights of other citizens. To secure the public good and 
         private rights against the danger of such a faction, and at the same 
         time to preserve the spirit and the form of popular government, is 
         then the great object to which our inquiries are directed. Let me add 
         that it is the great desideratum by which this form of government can 
         be rescued from the opprobrium under which it has so long labored, 
         and be recommended to the esteem and adoption of mankind.
      </p>

      <p>By what means is this object attainable? Evidently by one of two 
         only. Either the existence of the same passion or interest in a 
         majority at the same time must be prevented, or the majority, having 
         such coexistent passion or interest, must be rendered, by their 
         number and local situation, unable to concert and carry into effect 
         schemes of oppression. If the impulse and the opportunity be 
         suffered to coincide, we well know that neither moral nor religious 
         motives can be relied on as an adequate control. They are not found 
         to be such on the injustice and violence of individuals, and lose 
         their efficacy in proportion to the number combined together, that 
         is, in proportion as their efficacy becomes needful.
      </p>

      <p>From this view of the subject it may be concluded that a 
         <dfn>pure democracy</dfn>, by which I mean a society consisting of 
         a small number of citizens, who assemble and administer the 
         government in person, can admit of no cure for the mischiefs 
         of faction. A common passion or interest will, in almost every case, 
         be felt by a majority of the whole; a communication and concert 
         result from the form of government itself; and there is nothing to 
         check the inducements to sacrifice the weaker party or an obnoxious 
         individual. Hence it is that such democracies have ever been spectacles 
         of turbulence and contention; have ever been found incompatible 
         with personal security or the rights of property; and have in 
         general been as short in their lives as they have been violent in 
         their deaths. Theoretic politicians, who have patronized this species 
         of government, have erroneously supposed that by reducing mankind to 
         a perfect equality in their political rights, they would, at the same 
         time, be perfectly equalized and assimilated in their possessions, 
         their opinions, and their passions.
      </p>

      <p>A <dfn>republic</dfn>, by which I mean a government in which the 
         scheme of representation takes place, opens a different prospect, 
         and promises the cure for which we are seeking. Let us examine the 
         points in which it varies from pure democracy, and we shall comprehend 
         both the nature of the cure and the efficacy which it must derive from 
         the Union. </p>
         
      <p>The two great points of difference between a democracy and a republic 
         are: first, the <dfn>delegation of the government</dfn>, in the latter, to a small 
         number of citizens elected by the rest; secondly, the greater number of 
         citizens, and greater sphere of country, over which the latter may be 
         extended. </p>

      <p>The effect of the first difference is, on the one hand, to refine 
         and enlarge the public views, by passing them through the medium of 
         a chosen body of citizens, whose wisdom may best discern the true 
         interest of their country, and whose patriotism and love of justice will 
         be least likely to sacrifice it to temporary or partial considerations. 
         Under such a regulation, it may well happen that the public voice, 
         pronounced by the representatives of the people, will be more consonant 
         to the public good than if pronounced by the people themselves, 
         convened for the purpose. On the other hand, the effect may be inverted. 
         Men of factious tempers, of local prejudices, or of sinister designs, 
         may, by intrigue, by corruption, or by other means, first obtain the 
         suffrages, and then betray the interests, of the people. The question 
         resulting is, whether small or extensive republics are more favorable 
         to the election of proper guardians of the public weal; and it is 
         clearly decided in favor of the latter by two obvious considerations:
      </p>

      <p>In the first place, it is to be remarked that, however small the 
         republic may be, the representatives must be raised to a certain 
         number, in order to guard against the cabals of a few; and that, 
         however large it may be, they must be limited to a certain number, 
         in order to guard against the confusion of a multitude. Hence, the 
         number of representatives in the two cases not being in 
         proportion to that of the two constituents, and being proportionally 
         greater in the small republic, it follows that, if the proportion of 
         fit characters be not less in the large than in the small republic, 
         the former will present a greater option, and consequently a greater 
         probability of a fit choice. </p>

      <p>In the next place, as each representative will be chosen by a greater 
         number of citizens in the large than in the small republic, it will 
         be more difficult for unworthy candidates to practice with success 
         the vicious arts by which elections are too often carried; and the 
         suffrages of the people being more free, will be more likely to 
         centre in men who possess the most attractive merit and the most 
         diffusive and established characters. </p>

      <p>It must be confessed that in this, as in most other cases, there is 
         a mean, on both sides of which inconveniences will be found to lie. 
         By enlarging too much the number of <dfn>electors</dfn>, you render 
         the representatives too little acquainted with all their local 
         circumstances and lesser interests; as by reducing it too much, you 
         render him unduly attached to these, and too little fit to comprehend 
         and pursue great and national objects. The federal Constitution forms 
         a happy combination in this respect; the great and aggregate 
         interests being referred to the national, the local and particular to 
         the State legislatures. </p>

      <p>The other point of difference is, the greater number of citizens and 
         extent of territory which may be brought within the compass of 
         republican than of democratic government; and it is this circumstance 
         principally which renders factious combinations less to be dreaded in 
         the former than in the latter. The smaller the society, the fewer 
         probably will be the distinct parties and interests composing it; the 
         fewer the distinct parties and interests, the more frequently will a 
         majority be found of the same party; and the smaller the number of 
         individuals composing a majority, and the smaller the compass within 
         which they are placed, the more easily will they concert and execute 
         their plans of oppression. Extend the sphere, and you take in a 
         greater variety of parties and interests; you make it less probable 
         that a majority of the whole will have a common motive to invade the 
         rights of other citizens; or if such a common motive exists, it will 
         be more difficult for all who feel it to discover their 
         own strength, and to act in unison with each other. Besides other 
         impediments, it may be remarked that, where there is a consciousness 
         of unjust or dishonorable purposes, communication is always checked 
         by distrust in proportion to the number whose concurrence is necessary.
      </p>


      
      <p>In the extent and proper structure of the Union, therefore, we 
         behold a republican remedy for the diseases most incident to 
         republican government. And according to the degree of pleasure and 
         pride we feel in being republicans, ought to be our zeal in cherishing 
        the spirit and supporting the character of Federalists.
      </p>

      <p>PUBLIUS.</p>      
   </article>
   
   <footer>
      Bridger College History 308 &copy; 2018 (US)
      <span>
         <a href="#">About</a>
         <a href="#">Terms</a>
         <a href="#">Help</a>
      </span>
   </footer>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;