从数组中删除一些单词并突出显示剩余的单词答案

【问题标题】：Eliminate some words from an array and highlight the remaining words从数组中删除一些单词并突出显示剩余的单词
【发布时间】：2017-01-31 17:51:35
【问题描述】：

我的程序的目的是消除介词、副词、连词和辅助动词，而不使用任何 pos tagger。我需要突出显示原始句子中剩余的单词。浏览器应该显示 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>

【问题讨论】：

有效吗？请看这里：minimal reproducible example
说实话，我想我会用纯 javascript 处理所有逻辑，然后将其渲染为 html。
我已经试过了。你能告诉我如何根据我在这里给出的例子来解决这个问题

标签： javascript html css

【解决方案1】：

这是你的意思吗？

var eliminate = (function () {
    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'];
    return function testAgainst(str) {
        for (var index = 0; index < prep.length; index++) {
            var p = prep[index];
            str = str.replace(new RegExp("( |$|^)" + p + "( |$|^)", "ig"), ' ');
        }
        for (var index = 0; index < auxilVerb.length; index++) {
            var p = auxilVerb[index];
            str = str.replace(new RegExp("( |$|^)" + p + "( |$|^)", "ig"), ' ');
        }
        for (var index = 0; index < conj.length; index++) {
            var p = conj[index];
            str = str.replace(new RegExp("( |$|^)" + p + "( |$|^)", "ig"), ' ');
        }
        for (var index = 0; index < artc.length; index++) {
            var p = artc[index];
            str = str.replace(new RegExp("( |$|^)" + p + "( |$|^)", "ig"), ' ');
        }
        return str.replace(new RegExp(" +", "ig"), " ").replace(new RegExp("( )*$( )*|( )*^( )*", "ig"), "");
    };
})();
var input = document.getElementById("input");
var output = document.getElementById("output");
function run() {
    var val = input.value.toString();
    var goodWords = eliminate(val);
    val = val.split(" ");
    var html = "";
    for (var i = 0; i < val.length; i++) {
        if (goodWords.indexOf(val[i]) >= 0) {
            html += " <b>" + val[i] + '</b> ';
        }
        else {
            html += ' ' + val[i] + ' ';
        }
        output.innerHTML = html.replace(new RegExp(" +", "ig"), " ").replace(new RegExp("( )*$( )*|( )*^( )*", "ig"), "");
    }
}

input.onchange = run;
input.onkeyup = run;
run();

<input value="The quick brown fox jumps over the lazy dog" id="input" />
<p id="output"></p>

【讨论】：

是的，这几乎就是我想要的，除了原句应该像文本一样显示，而不是输入框。例如：敏捷的棕色狐狸跳过懒惰的狗。（突出显示的单词）快速棕色狐狸跳懒狗
@juiii 有一个输入用于交互（keyup、change）。您可以修改此代码以将输入替换为您想要的几乎任何其他 HTML 元素，但不要忘记使用 input.value 以外的其他内容正确获取文本内容
@matvey-andreyev 不，没有输入。只在浏览器中显示