Javascript 从数组中删除一些单词并突出显示其余单词_Javascript_Html_Css

Javascript 从数组中删除一些单词并突出显示其余单词

javascript html css

Javascript 从数组中删除一些单词并突出显示其余单词,javascript,html,css,Javascript,Html,Css,我的程序的目的是消除介词、副词、连词和辅助动词，而不使用任何词性标记。我需要突出原句中的剩余单词。浏览器应显示ID为“stat”和“ans”的段落元素。Stat应显示整个段落，并突出显示“ans”中的单词。突出显示可以通过任何方式完成，如背景色或字体颜色。我不能做这个突出部分 <body> //Original Text <p id="sentence" hidden>Particle physics (also high ene

我的程序的目的是消除介词、副词、连词和辅助动词，而不使用任何词性标记。我需要突出原句中的剩余单词。浏览器应显示ID为“stat”和“ans”的段落元素。Stat应显示整个段落，并突出显示“ans”中的单词。突出显示可以通过任何方式完成，如背景色或字体颜色。我不能做这个突出部分

<body>        
//Original Text   
        <p id="sentence" hidden>Particle physics (also high energy physics) is the branch of physics that studies the nature of the particles that constitute matter (particles with mass) and radiation (massless particles). Although the word "particle" can refer to various types of very small objects (e.g. protons, gas particles, or even household dust), "particle physics" usually investigates the irreducibly smallest detectable particles and the irreducibly fundamental force fields necessary to explain them. </p>     

                <p id="stat"> </p>
                <p id="ans"> </p>

            <style type="text/css">
                .span {
                    background-color: lightgreen;
                }
            </style>        


            <script>
    //WORDS TO BE ELIMINATED
                var prep = ['With','with','At','at','From','from','Into','into','During','during','Including','including','Until','until','against','Against','Among','among','Throughout','throughout','Despite','despite','Towards','towards','Upon','upon','Concerning','concerning','Of','of','To','to','In','in','For','for','On','on','By','by','About','about','Like','like','Through','through','Over','over','Before','before','Between','between','after','Since','since','Without','without','Under','under','Within','within','Along','along','Following','following','Across','across','Behind','behind','Beyond','beyond','Plus','plus','Except','except','Up','up','Out','out','Around','around','Down','down','Off','off','Above','above','Near','near'];
                var auxilVerb = ['do','does','did','has','have','had','is','am','are','was','were','be','being','been','may','must','might','should','could','would','shall','will','can'];
                var conj = ['And','and','Or','or','But','but','Nor','nor','So','so','For','for','Yet','yet','After','after','Although','although','As','as','As if','as if','As Long As','as long as','Because','because','Before','before','Even if','even if','Even though','even though','Once','once','Since','since','So that','so that','Though','though','Till','till','Unless','unless','Until','until','What','what','When','Whenever','whenever','Wherever','wherever','Whether','Whether','While'];
                var artc= ['A','a','An','an','The','the'];

                var one = prep.concat(prep );
                var two = one.concat(auxilVerb);
                var three = two.concat(conj);
                var elim = three.concat(artc);
    //Split sentence into array of words for easier manipulation
                var line1 = $('#sentence').html();
                var line = line1.toString().split(" ");
                var newStat = line.slice();
                var emptyArr = [];
                var words = line.slice();
    //Eliminating the undesired words
                aLoop:for(var k=0;k<line.length;k++){
                    bLoop:for (var t=0;t<elim.length;t++){
                        if(line[k]===elim[t]){
                            words[k] = ' ';
                            emptyArr.push(k);
                            continue aLoop;
                        } else {
                            //console.log(k);
                            words[k] = line[k];
     //Expecting to add <span> tag to the words which should be highlighted
                            newStat.splice(k,0,"<span class='span'>"); 
                            newStat.splice(k+2,0,"</span>");
                        }
                    }
                }

                console.log(newStat);  
                console.log(words); 

                $('#stat').html(newStat.join(" ")); //DISPLAY the original sentence with highlighted  words
                $('#ans').html(words.join(" ")); //DISPLAY the left over words 

            </script>

</body>

这就是你的意思吗

var消去=函数{ 变量准备=[“With”，“With”，“At”，“At”，“At”，“From”，“From”，“To”，“To”，“In”，“In”，“In”，“For”，“For”，“For”，“On”，“On”，“By”，“by”，“About”，“About”，“Like”，“Like”，“Like”，“Through”，“Through”，“Over”，“Over”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Before”，“Under”，“Under”，“Under”，“Under”，“Under”，“Under”，““向上”、“向外”、“向外”、“周围”、“周围”、“向下”、“向下”、“关闭”、“关闭”、“上方”、“上方”、“近”、“近”]； var-Auxiverb=['do'，'does'，'did'，'has'，'had'，'is'，'am'，'are'，'was'，'be'，'being'，'been'，'been'，'may'，'must'，'may'，'should'，'could'，'will'，'can']； var conj=[和]“虽然”，“直到”，“除非”，“除非”，“直到”，“直到”，“直到”，“什么”，“什么”，“何时”，“何时”，“何时”，“何地”，“是否”，“是否”，“是否”，“当”]； var artc=['A'，'A'，'An'，'An'，'The'，'The']；返回函数testAgainststr{ 对于var指数=0；指数=0{ html+=+val[i]+''； } 否则{ html+=''+val[i]+''； } output.innerHTML=html.replacenew RegExp+，ig，.replacenew RegExp*$*|*^*，ig； } } input.onchange=run； input.onkeyup=运行；跑

它能工作吗？请看这里：老实说，我想我会用纯javascript处理所有逻辑，然后将其呈现为html。我已经尝试过了。你能告诉我如何在我给出的示例上工作吗？是的，这几乎是我想要的，除了原始句子应该显示为文本之外d不是输入框。例如：敏捷的棕色狐狸跳过了懒狗。单词突出显示了敏捷的棕色狐狸跳过了懒狗dog@juiii这里有一个用于交互的输入keyup，change。您可以修改此代码，用您想要的几乎任何其他HTML元素替换输入，但不要忘记使用inp以外的内容正确地获取文本内容美国犹他州。value@matvey-andreyev否没有输入。仅显示在浏览器中