我正在尝试过滤出戏剧的线条。当您单击左侧选择框中的字符时，它应仅显示其行。由于HTML没有将每个部分分成div（我无法编辑HTML文档，因为它是一个赋值），因此我无法将其工作。我想到的第一件事是找到其中包含字符名称的H3，其他一切都隐藏起来。但由于其他所有东西都在blockquote中，感觉我需要它匹配的H3和下一个H3（无论它是否匹配）。任何帮助或方向将不胜感激。
为了方便起见，我创建了一个JSFiddle，因为这是很多HTML文本。
HTML
<div id="actList"><table><tr>
<td>ACT I</td><td>ACT II</td><td>ACT III</td>
<td>ACT IV</td><td>ACT V</td>
</tr></table></div>
<div id="characterList"></div>
<div id="sceneIntro">
<h2>Lines from Act V, Scene 1</h2>
</div>
<div id="scene">
<h3>PROSPERO</h3>
<blockquote><i>Enter PROSPERO in his magic robes, and ARIEL</i></blockquote>
<blockquote>Now does my project gather to a head:<br />
My charms crack not; my spirits obey; and time<br />
Goes upright with his carriage. How's the day?
</blockquote>
<h3>ARIEL</h3>
<blockquote>On the sixth hour; at which time, my lord,<br />
You said our work should cease.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>I did say so,<br />
When first I raised the tempest. Say, my spirit,<br/>
How fares the king and's followers?
</blockquote>
<h3>ARIEL</h3>
<blockquote>Confined together<br />
In the same fashion as you gave in charge,<br />
Just as you left them; all prisoners, sir,<br />
In the line-grove which weather-fends your cell;<br />
They cannot budge till your release. The king,<br />
His brother and yours, abide all three distracted<br />
And the remainder mourning over them,<br />
Brimful of sorrow and dismay; but chiefly<br />
Him that you term'd, sir, 'The good old lord Gonzalo;<br />
His tears run down his beard, like winter's drops<br />
From eaves of reeds. Your charm so strongly works 'em<br />
That if you now beheld them, your affections<br />
Would become tender.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>Dost thou think so, spirit?
</blockquote>
<h3>ARIEL</h3>
<blockquote>Mine would, sir, were I human.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>And mine shall.<br />
Hast thou, which art but air, a touch, a feeling<br />
Of their afflictions, and shall not myself,<br />
One of their kind, that relish all as sharply,<br />
Passion as they, be kindlier moved than thou art?<br />
Though with their high wrongs I am struck to the quick,<br />
Yet with my nobler reason 'gaitist my fury<br />
Do I take part: the rarer action is<br />
In virtue than in vengeance: they being penitent,<br />
The sole drift of my purpose doth extend<br />
Not a frown further. Go release them, Ariel:<br />
My charms I'll break, their senses I'll restore,<br />
And they shall be themselves.
</blockquote>
<h3>ARIEL</h3>
<blockquote>I'll fetch them, sir.</blockquote>
<blockquote><i>Exit</i></blockquote>
<h3>PROSPERO</h3>
<blockquote>Ye elves of hills, brooks, standing lakes and groves,<br />
And ye that on the sands with printless foot<br />
Do chase the ebbing Neptune and do fly him<br />
When he comes back; you demi-puppets that<br />
By moonshine do the green sour ringlets make,<br />
Whereof the ewe not bites, and you whose pastime<br />
Is to make midnight mushrooms, that rejoice<br />
To hear the solemn curfew; by whose aid,<br />
Weak masters though ye be, I have bedimm'd<br />
The noontide sun, call'd forth the mutinous winds,<br />
And 'twixt the green sea and the azured vault<br />
Set roaring war: to the dread rattling thunder<br />
Have I given fire and rifted Jove's stout oak<br />
With his own bolt; the strong-based promontory<br />
Have I made shake and by the spurs pluck'd up<br />
The pine and cedar: graves at my command<br />
Have waked their sleepers, oped, and let 'em forth<br />
By my so potent art. But this rough magic<br />
I here abjure, and, when I have required<br />
Some heavenly music, which even now I do,<br />
To work mine end upon their senses that<br />
This airy charm is for, I'll break my staff,<br />
Bury it certain fathoms in the earth,<br />
And deeper than did ever plummet sound<br />
I'll drown my book.
</blockquote>
<blockquote><i>Solemn music</i></blockquote>
<blockquote><i>Re-enter ARIEL before: then ALONSO, with a frantic gesture, attended by GONZALO; SEBASTIAN and ANTONIO in like manner, attended by ADRIAN and FRANCISCO they all enter the circle which PROSPERO had made, and there stand charmed; which PROSPERO observes.</i></blockquote>
<h3>PROSPERO</h3>
<blockquote>A solemn air and the best comforter<br />
To an unsettled fancy cure thy brains,<br />
Now useless, boil'd within thy skull! There stand,<br />
For you are spell-stopp'd.<br />
Holy Gonzalo, honourable man,<br />
Mine eyes, even sociable to the show of thine,<br />
Fall fellowly drops. The charm dissolves apace,<br />
And as the morning steals upon the night,<br />
Melting the darkness, so their rising senses<br />
Begin to chase the ignorant fumes that mantle<br />
Their clearer reason. O good Gonzalo,<br />
My true preserver, and a loyal sir<br />
To him you follow'st! I will pay thy graces<br />
Home both in word and deed. Most cruelly<br />
Didst thou, Alonso, use me and my daughter:<br />
Thy brother was a furtherer in the act.<br />
Thou art pinch'd fort now, Sebastian. Flesh and blood,<br />
You, brother mine, that entertain'd ambition,<br />
Expell'd remorse and nature; who, with Sebastian,<br />
Whose inward pinches therefore are most strong,<br />
Would here have kill'd your king; I do forgive thee,<br />
Unnatural though thou art. Their understanding<br />
Begins to swell, and the approaching tide<br />
Will shortly fill the reasonable shore<br />
That now lies foul and muddy. Not one of them<br />
That yet looks on me, or would know me Ariel,<br />
Fetch me the hat and rapier in my cell:<br />
I will discase me, and myself present<br />
As I was sometime Milan: quickly, spirit;<br />
Thou shalt ere long be free.
</blockquote>
<blockquote><i>ARIEL sings and helps to attire him</i></blockquote>
<h3>ARIEL</h3>
<blockquote>Where the bee sucks. there suck I:<br />
In a cowslip's bell I lie;<br />
There I couch when owls do cry.<br />
On the bat's back I do fly<br />
After summer merrily.<br />
Merrily, merrily shall I live now<br />
Under the blossom that hangs on the bough.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>Why, that's my dainty Ariel! I shall miss thee:<br />
But yet thou shalt have freedom: so, so, so.<br />
To the king's ship, invisible as thou art:<br />
There shalt thou find the mariners asleep<br />
Under the hatches; the master and the BOATSWAIN<br />
Being awake, enforce them to this place,<br />
And presently, I prithee.
</blockquote>
<h3>ARIEL</h3>
<blockquote>I drink the air before me, and return<br />
Or ere your pulse twice beat.
</blockquote>
<blockquote><i>Exit</i></blockquote>
<h3>GONZALO</h3>
<blockquote>All torment, trouble, wonder and amazement<br />
Inhabits here: some heavenly power guide us<br />
Out of this fearful country!
</blockquote>
<h3>PROSPERO</h3>
<blockquote>Behold, sir king,<br />
The wronged Duke of Milan, Prospero:<br />
For more assurance that a living prince<br />
Does now speak to thee, I embrace thy body;<br />
And to thee and thy company I bid<br />
A hearty welcome.
</blockquote>
<h3>ALONSO</h3>
<blockquote>Whether thou best he or no,<br />
Or some enchanted trifle to abuse me,<br />
As late I have been, I not know: thy pulse<br />
Beats as of flesh and blood; and, since I saw thee,<br />
The affliction of my mind amends, with which,<br />
I fear, a madness held me: this must crave,<br />
An if this be at all, a most strange story.<br />
Thy dukedom I resign and do entreat<br />
Thou pardon me my wrongs. But how should Prospero<br />
Be living and be here?
</blockquote>
<h3>PROSPERO</h3>
<blockquote>First, noble friend,<br />
Let me embrace thine age, whose honour cannot<br />
Be measured or confined.
</blockquote>
<h3>GONZALO</h3>
<blockquote>Whether this be<br />
Or be not, I'll not swear.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>You do yet taste<br />
Some subtilties o' the isle, that will not let you<br />
Believe things certain. Welcome, my friends all!<br />
But you, my brace of lords, were I so minded,<br />
I here could pluck his highness' frown upon you<br />
And justify you traitors: at this time<br />
I will tell no tales.
</blockquote>
<h3>SEBASTIAN</h3>
<blockquote>[Aside] The devil speaks in him.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>No.<br />
For you, most wicked sir, whom to call brother<br />
Would even infect my mouth, I do forgive<br />
Thy rankest fault; all of them; and require<br />
My dukedom of thee, which perforce, I know,<br />
Thou must restore.
</blockquote>
<h3>ALONSO</h3>
<blockquote>If thou be'st Prospero,<br />
Give us particulars of thy preservation;<br />
How thou hast met us here, who three hours since<br />
Were wreck'd upon this shore; where I have lost--<br />
How sharp the point of this remembrance is!--<br />
My dear son Ferdinand.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>I am woe for't, sir.
</blockquote>
<h3>ALONSO</h3>
<blockquote>Irreparable is the loss, and patience<br />
Says it is past her cure.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>I rather think<br />
You have not sought her help, of whose soft grace<br />
For the like loss I have her sovereign aid<br />
And rest myself content.
</blockquote>
<h3>ALONSO</h3>
<blockquote>You the like loss!
</blockquote>
<h3>PROSPERO</h3>
<blockquote>As great to me as late; and, supportable<br />
To make the dear loss, have I means much weaker<br />
Than you may call to comfort you, for I<br />
Have lost my daughter.
</blockquote>
<h3>ALONSO</h3>
<blockquote>A daughter?<br />
O heavens, that they were living both in Naples,<br />
The king and queen there! that they were, I wish<br />
Myself were mudded in that oozy bed<br />
Where my son lies. When did you lose your daughter?
</blockquote>
<h3>PROSPERO</h3>
<blockquote>In this last tempest. I perceive these lords<br />
At this encounter do so much admire<br />
That they devour their reason and scarce think<br />
Their eyes do offices of truth, their words<br />
Are natural breath: but, howsoe'er you have<br />
Been justled from your senses, know for certain<br />
That I am Prospero and that very duke<br />
Which was thrust forth of Milan, who most strangely<br />
Upon this shore, where you were wreck'd, was landed,<br />
To be the lord on't. No more yet of this;<br />
For 'tis a chronicle of day by day,<br />
Not a relation for a breakfast nor<br />
Befitting this first meeting. Welcome, sir;<br />
This cell's my court: here have I few attendants<br />
And subjects none abroad: pray you, look in.<br />
My dukedom since you have given me again,<br />
I will requite you with as good a thing;<br />
At least bring forth a wonder, to content ye<br />
As much as me my dukedom.<br /><br />
<i>Here PROSPERO discovers FERDINAND and MIRANDA playing at chess</i></blockquote>
<h3>MIRANDA</h3>
<blockquote>Sweet lord, you play me false.
</blockquote>
<h3>FERDINAND</h3>
<blockquote>No, my dear'st love,<br />
I would not for the world.
</blockquote>
<h3>MIRANDA</h3>
<blockquote>Yes, for a score of kingdoms you should wrangle,<br />
And I would call it, fair play.
</blockquote>
<h3>ALONSO</h3>
<blockquote>If this prove<br />
A vision of the Island, one dear son<br />
Shall I twice lose.
</blockquote>
<h3>SEBASTIAN</h3>
<blockquote>A most high miracle!
</blockquote>
<h3>FERDINAND</h3>
<blockquote>Though the seas threaten, they are merciful;<br />
I have cursed them without cause.<br />
<i>Kneels</i></blockquote>
<h3>ALONSO</h3>
<blockquote>Now all the blessings<br />
Of a glad father compass thee about!<br />
Arise, and say how thou camest here.
</blockquote>
<h3>MIRANDA</h3>
<blockquote>O, wonder!<br />
How many goodly creatures are there here!<br />
How beauteous mankind is! O brave new world,<br />
That has such people in't!
</blockquote>
<h3>PROSPERO</h3>
<blockquote>'Tis new to thee.
</blockquote>
<h3>ALONSO</h3>
<blockquote>What is this maid with whom thou wast at play?<br />
Your eld'st acquaintance cannot be three hours:<br />
Is she the goddess that hath sever'd us,<br />
And brought us thus together?
</blockquote>
<h3>FERDINAND</h3>
<blockquote>Sir, she is mortal;<br />
But by immortal Providence she's mine:<br />
I chose her when I could not ask my father<br />
For his advice, nor thought I had one. She<br />
Is daughter to this famous Duke of Milan,<br />
Of whom so often I have heard renown,<br />
But never saw before; of whom I have<br />
Received a second life; and second father<br />
This lady makes him to me.
</blockquote>
<h3>ALONSO</h3>
<blockquote>I am hers:<br />
But, O, how oddly will it sound that I<br />
Must ask my child forgiveness!
</blockquote>
<h3>PROSPERO</h3>
<blockquote>There, sir, stop:<br />
Let us not burthen our remembrance with<br />
A heaviness that's gone.
</blockquote>
<h3>GONZALO</h3>
<blockquote>I have inly wept,<br />
Or should have spoke ere this. Look down, you god,<br />
And on this couple drop a blessed crown!<br />
For it is you that have chalk'd forth the way<br />
Which brought us hither.
</blockquote>
<h3>ALONSO</h3>
<blockquote>I say, Amen, Gonzalo!
</blockquote>
<h3>GONZALO</h3>
<blockquote>Was Milan thrust from Milan, that his issue<br />
Should become kings of Naples? O, rejoice<br />
Beyond a common joy, and set it down<br />
With gold on lasting pillars: In one voyage<br />
Did Claribel her husband find at Tunis,<br />
And Ferdinand, her brother, found a wife<br />
Where he himself was lost, Prospero his dukedom<br />
In a poor isle and all of us ourselves<br />
When no man was his own.
</blockquote>
<h3>ALONSO</h3>
<blockquote>[To FERDINAND and MIRANDA] Give me your hands:<br />
Let grief and sorrow still embrace his heart<br />
That doth not wish you joy!
</blockquote>
<h3>GONZALO</h3>
<blockquote>Be it so! Amen!<br />
<i>Re-enter ARIEL, with the Master and BOATSWAIN amazedly following</i></blockquote>
<h3>GONZALO</h3>
<blockquote>O, look, sir, look, sir! here is more of us:<br />
I prophesied, if a gallows were on land,<br />
This fellow could not drown. Now, blasphemy,<br />
That swear'st grace o'erboard, not an oath on shore?<br />
Hast thou no mouth by land? What is the news?
</blockquote>
<h3>BOATSWAIN</h3>
<blockquote>The best news is, that we have safely found<br />
Our king and company; the next, our ship--<br />
Which, but three glasses since, we gave out split--<br />
Is tight and yare and bravely rigg'd as when<br />
We first put out to sea.
</blockquote>
<h3>ARIEL</h3>
<blockquote>[Aside to PROSPERO] Sir, all this service<br />
Have I done since I went.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>[Aside to ARIEL] My tricksy spirit!
</blockquote>
<h3>ALONSO</h3>
<blockquote>These are not natural events; they strengthen<br />
From strange to stranger. Say, how came you hither?
</blockquote>
<h3>BOATSWAIN</h3>
<blockquote>If I did think, sir, I were well awake,<br />
I'ld strive to tell you. We were dead of sleep,<br />
And--how we know not--all clapp'd under hatches;<br />
Where but even now with strange and several noises<br />
Of roaring, shrieking, howling, jingling chains,<br />
And more diversity of sounds, all horrible,<br />
We were awaked; straightway, at liberty;<br />
Where we, in all her trim, freshly beheld<br />
Our royal, good and gallant ship, our master<br />
Capering to eye her: on a trice, so please you,<br />
Even in a dream, were we divided from them<br />
And were brought moping hither.
</blockquote>
<h3>ARIEL</h3>
<blockquote>[Aside to PROSPERO] Was't well done?
</blockquote>
<h3>PROSPERO</h3>
<blockquote>[Aside to ARIEL] Bravely, my diligence. Thou shalt be free.
</blockquote>
<h3>ALONSO</h3>
<blockquote>This is as strange a maze as e'er men trod<br />
And there is in this business more than nature<br />
Was ever conduct of: some oracle<br />
Must rectify our knowledge.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>Sir, my liege,<br />
Do not infest your mind with beating on<br />
The strangeness of this business; at pick'd leisure<br />
Which shall be shortly, single I'll resolve you,<br />
Which to you shall seem probable, of every<br />
These happen'd accidents; till when, be cheerful<br />
And think of each thing well.<br />
<blockquote><i>Aside to ARIEL</i></blockquote>Come hither, spirit:<br />
Set Caliban and his companions free;<br />
Untie the spell.<br />
<blockquote><i>Exit ARIEL</i></blockquote>How fares my gracious sir?<br />
There are yet missing of your company<br />
Some few odd lads that you remember not.<br /><br />
<i>Re-enter ARIEL, driving in CALIBAN, STEPHANO and TRINCULO, in their stolen apparel</i></blockquote>
<h3>STEPHANO</h3>
<blockquote>Every man shift for all the rest, and<br />
let no man take care for himself; for all is<br />
but fortune. Coragio, bully-monster, coragio!
</blockquote>
<h3>TRINCULO</h3>
<blockquote>If these be true spies which I wear in my head,<br />
here's a goodly sight.
</blockquote>
<h3>CALIBAN</h3>
<blockquote>O Setebos, these be brave spirits indeed!<br />
How fine my master is! I am afraid<br />
He will chastise me.
</blockquote>
<h3>SEBASTIAN</h3>
<blockquote>Ha, ha!<br />
What things are these, my lord Antonio?<br />
Will money buy 'em?
</blockquote>
<h3>ANTONIO</h3>
<blockquote>Very like; one of them<br />
Is a plain fish, and, no doubt, marketable.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>Mark but the badges of these men, my lords,<br />
Then say if they be true. This mis-shapen knave,<br />
His mother was a witch, and one so strong<br />
That could control the moon, make flows and ebbs,<br />
And deal in her command without her power.<br />
These three have robb'd me; and this demi-devil--<br />
For he's a bastard one--had plotted with them<br />
To take my life. Two of these fellows you<br />
Must know and own; this thing of darkness!<br />
Acknowledge mine.
</blockquote>
<h3>CALIBAN</h3>
<blockquote>I shall be pinch'd to death.
</blockquote>
<h3>ALONSO</h3>
<blockquote>Is not this Stephano, my drunken butler?
</blockquote>
<h3>SEBASTIAN</h3>
<blockquote>He is drunk now: where had he wine?
</blockquote>
<h3>ALONSO</h3>
<blockquote>And Trinculo is reeling ripe: where should they<br />
Find this grand liquor that hath gilded 'em?<br />
How camest thou in this pickle?
</blockquote>
<h3>TRINCULO</h3>
<blockquote>I have been in such a pickle since I<br />
saw you last that, I fear me, will never out of<br />
my bones: I shall not fear fly-blowing.
</blockquote>
<h3>SEBASTIAN</h3>
<blockquote>Why, how now, Stephano!
</blockquote>
<h3>STEPHANO</h3>
<blockquote>O, touch me not; I am not Stephano, but a cramp.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>You'ld be king o' the isle, sirrah?
</blockquote>
<h3>STEPHANO</h3>
<blockquote>I should have been a sore one then.
</blockquote>
<h3>ALONSO</h3>
<blockquote>This is a strange thing as e'er I look'd on.<br /><br />
<i>Pointing to Caliban</i></blockquote>
<h3>PROSPERO</h3>
<blockquote>He is as disproportion'd in his manners<br />
As in his shape. Go, sirrah, to my cell;<br />
Take with you your companions; as you look<br />
To have my pardon, trim it handsomely.
</blockquote>
<h3>CALIBAN</h3>
<blockquote>Ay, that I will; and I'll be wise hereafter<br />
And seek for grace. What a thrice-double ass<br />
Was I, to take this drunkard for a god<br />
And worship this dull fool!
</blockquote>
<h3>PROSPERO</h3>
<blockquote>Go to; away!
</blockquote>
<h3>ALONSO</h3>
<blockquote>Hence, and bestow your luggage where you found it.
</blockquote>
<h3>SEBASTIAN</h3>
<blockquote>Or stole it, rather.
</blockquote>
<blockquote><i>Exeunt CALIBAN, STEPHANO, and TRINCULO</i></blockquote>
<h3>PROSPERO</h3>
<blockquote>Sir, I invite your highness and your train<br />
To my poor cell, where you shall take your rest<br />
For this one night; which, part of it, I'll waste<br />
With such discourse as, I not doubt, shall make it<br />
Go quick away; the story of my life<br />
And the particular accidents gone by<br />
Since I came to this isle: and in the morn<br />
I'll bring you to your ship and so to Naples,<br />
Where I have hope to see the nuptial<br />
Of these our dear-beloved solemnized;<br />
And thence retire me to my Milan, where<br />
Every third thought shall be my grave.
</blockquote>
<h3>ALONSO</h3>
<blockquote>I long<br />
To hear the story of your life, which must<br />
Take the ear strangely.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>I'll deliver all;<br />
And promise you calm seas, auspicious gales<br />
And sail so expeditious that shall catch<br />
Your royal fleet far off.<br />
<blockquote><i>Aside to ARIEL</i></blockquote>My Ariel, chick,<br />
That is thy charge: then to the elements<br />
Be free, and fare thou well! Please you, draw near.<br />
<blockquote><i>Exeunt</i></blockquote>EPILOGUE<br />
SPOKEN BY PROSPERO<br />
Now my charms are all o'erthrown,<br />
And what strength I have's mine own,<br />
Which is most faint: now, 'tis true,<br />
I must be here confined by you,<br />
Or sent to Naples. Let me not,<br />
Since I have my dukedom got<br />
And pardon'd the deceiver, dwell<br />
In this bare island by your spell;<br />
But release me from my bands<br />
With the help of your good hands:<br />
Gentle breath of yours my sails<br />
Must fill, or else my project fails,<br />
Which was to please. Now I want<br />
Spirits to enforce, art to enchant,<br />
And my ending is despair,<br />
Unless I be relieved by prayer,<br />
Which pierces so that it assaults<br />
Mercy itself and frees all faults.<br />
As you from crimes would pardon'd be,<br />
Let your indulgence set me free.
</blockquote>
</div>
的Javascript
window.onload = createList;
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
function uniqueElemText(elemName) {
elems = document.getElementsByTagName(elemName);
elemsArray = new Array();
for (var i=0; i<elems.length; i++) elemsArray[i]=elems[i].innerHTML;
elemsArray.sort();
for (i=0; i<elemsArray.length-1; i++) {
if (elemsArray[i]==elemsArray[i+1]) {
elemsArray.splice(i+1,1);
i--;
}
}
return elemsArray;
}
function createList(){
var option;
var characters = new Array();
var select = document.createElement('select');
select.setAttribute('id', 'charList');
select.addEventListener('change', filter, false);
var charBox = document.getElementById('characterList');
charBox.innerHTML = '<p>Show Only Line By:</p>';
charBox.appendChild(select);
var tempChar = document.getElementsByTagName('h3');
for(var i = 0; i < tempChar.length; i++)
if(characters.indexOf(tempChar[i].innerHTML) == -1)
characters.push(tempChar[i].innerHTML);
delete tempChar;
characters.sort();
option = document.createElement("option");
option.text = "Show All Character Lines";
option.value = 'ALL';
select.add(option);
for(var i = 0; i < characters.length; i++)
{
option = document.createElement("option");
option.text = characters[i];
option.value = characters[i];
select.add(option);
}
}
function filter(){
var scene = document.getElementById('scene');
var elemList = scene.getElementsByTagName('*');
var list = document.getElementById('charList');
var character = list.options[list.selectedIndex].value;
for(var i = 0; i < elemList.length; i++)
{
if(elemList[i].innerHTML.indexOf("<h3>"+character+"</h3>") !== -1)
{
elemList[i].style.visibility = 'hidden';
}
}
}
答案 0 :(得分：1)
我用解决方案重写了过滤器功能。
function filter() {
var scene = document.getElementById('scene');
var elemList = scene.getElementsByTagName('*');
var list = document.getElementById('charList');
var character = list.options[list.selectedIndex].value;
var hide = false;
for (var i = 0; i < elemList.length; i++) {
var elem = elemList[i];
if (elem.tagName == "H3") {
hide = (elemList[i].innerHTML.indexOf(character) == -1)
}
if (hide) {
elem.style.opacity = 0.5;
} else {
elem.style.opacity = 1.0;
}
}
}
此解决方案逐步执行每个元素，并在找到不匹配的名称时开始隐藏，并在找到匹配的名称时停止隐藏。
您遇到的主要错误是，您正在innerHTML检查<h3>Character</h3>而不是outerHtml。使用tagName实际上更安全。
答案 1 :(得分：1)
我对此问题的解决方案
var scene = document.getElementById("scene");
parts = scene.innerHTML.split( /<h3>|<\/h3>/g );
function filter( character ) {
var newHTML = "";
for( var i = 1; i < parts.length; i += 2 ) {
if( parts[i] === character ) {
newHTML += "<h3>" + parts[i] + "</h3>" + parts[i+1];
}
}
scene.innerHTML = newHTML;
}
演示here
答案 2 :(得分：0)
我要做的是在页面加载时使用JavaScript将结构更改为更方便的格式。 重新排列元素后，隐藏，设置，重新排列和播放元素应该快得多。
为此，您可以遍历#scene元素的内容，将所有子元素移动到新的div，您可以在其上设置某些属性以便识别它们。
建议的结构可能是
<div class="lines" data-character="PROSPERO">
<h3>PROSPERO</h3>
<blockquote>Duh!</blockquote>
<blockquote>Whatever!</blockquote>
</div>
然后，您可以使用首选方法轻松过滤内容。例如，使用CSS：
.lines { display: none; }
.lines[data-character=PROSPERO] { display: block; }