ハイライト一致するテキスト

Question

（Mongodbとnodeとjsを使用して）ユーザーのテキストをウェブページに投稿するとき、ストアの配列のストア名と一致するテキストを強調表示しようとしています。デシベルをループし、ページに投稿するためのコード：

<% posts.forEach(function(post) { %> 
    <div class="post"> 
     <h4 class="date"> 
      <span><%= post.created.toDateString() %></span> 
     </h4> 
     <p class="post_text"><%- post.body %></p> 
    </div> 
<% }); %> 

私は配列から単語を一致させるために使用されるいくつかの練習JSコンソールのコードを持っていますが、難易強調表示された単語と一緒に戻ってテキストを入れて前進を持っています（s）。 2ワードストア名この例を使用して、別の問題です...

var blogInput = "We went to target last night, also to publix"; 
var array1 = blogInput.split(" "); 
var array2 = ["kroger", "lums", "marlows", "eats", "burger king", 
"home", "wendys", "publix", "donut circus", "jewelry store", 
"target"]; 

function getMatch(a, b) { 
    var matches = []; 
    for (var i = 0; i < a.length; i++) { 
    for (var e = 0; e < b.length; e++) {   
     if (a[i] === b[e]) { 
     var x = a[i]; 
     matches.push(x); 
     } 
    } 
    } 
    return matches; 
} 
getMatch(array1, array2); 
(2) ["target", "publix"] 

私は当時一緒に文字列の文を入れて、「ターゲット」と青の「パブリックス・スーパーマーケット」のテキストでページに掲載したいと思います。知恵のヒントや言葉が役に立つでしょう。ありがとう！

Answer 1

あなたは、その色を変更し、特定のクラスにspanで強調表示単語を囲む必要があります。 。

これらのスパンを使用して投稿を再構築できる機能は、この機能に似ている可能性があります。

let blogInput = "We went to target last night, also to publix"; 
let blogWords = blogInput.split(" "); 
let searchedWords = ["kroger", "lums", "marlows", "eats", "burger king", 
"home", "wendys", "publix", "donut circus", "jewelry store", 
"target"]; 

function getMatch(a, b) { ... } 

let matchedWords = getMatch(blogWords, searchedWords); 
let blogText = ''; 
blogWords.forEach(function(word) { 
    if (matchedWords.indexOf(word) != -1) { 
    blogText += ' <span class="highlight">' + word + '</span>'; 
    } else { 
    blogText += ' ' + word; 
    } 
}); 
// Remove leading space 
blogText = blogText.trim(); 

あなたはポストテキストとしてblogTextを使用してください。次のようなCSSルールを追加する必要があります。

span.highlight { 
    color: blue; 
} 

Answer 2

あなただけの個々の単語にそれを分割するのではなく、文字列としてblogInputと協力し、キーワードが文字列であるかどうかを判断するためにindexOf（またはincludes）を使用し、二つのループを必要としません。これは、複数の単語を含む店舗名を検索しようとする際の問題も解決します。

var blogInput = "We went to target last night, also to publix"; 
var array2 = ["kroger", "lums", "marlows", "eats", "burger king", 
"home", "wendys", "publix", "donut circus", "jewelry store", 
"target"]; 
// filter out any store names that aren't included in blogInput 
var matches = array2.filter(function(store) { 
    return blogInput.indexOf(store) > -1; 
}); 

また、ケーシングの問題を解決するために​​とstore.toLowerCase()にしたいことがあります。

あなたはES6サポートして新しいブラウザをターゲットにしたり、に簡素化することができバベルのようなtranspilerを使用している場合：

const blogInput = "We went to target last night, also to publix"; 
const storeNames = ["kroger", "lums", "marlows", "eats", "burger king", 
"home", "wendys", "publix", "donut circus", "jewelry store", 
"target"]; 
// filter out any store names that aren't included in blogInput 
var matches = storeNames.filter(store => blogInput.includes(store));