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控制台代码我用来匹配数组中的单词，但是很难继续将文本与突出显示的单词放回去。 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"]

使用这个例子，我想把字符串句子放在一起，然后发布到页面，其中'target'和'publix'文本为蓝色。任何暗示或智慧的话都会有所帮助。谢谢！

Answer 1

您不需要两个循环，只需将@IBOutlet weak var verbLabel: UILabel! @IBOutlet weak var tenseLabel: UILabel! @IBOutlet weak var userInput: UITextField! @IBOutlet weak var textView: UITextView! var currentRow: Int = 0 var countTenseColumns: Int = 2 var currentColumn: Int = 0 var columnNames = ["id","infinitive","indPreJe","indPreTu"] @IBAction func checkAnswer(_ sender: Any) { if userInput.text == verbDatabase[currentRow].indPreTu { textView.text = "correct!" viewWillLayoutSubviews() userInput.text = nil } else { textView.text = "the correct answer is \(verbDatabase[currentRow].indPreTu ?? "error")" } } func randomNumberGeneratorRow() -> Int { //generates random number from 1 to verbDatabase.count return Int(arc4random_uniform(UInt32(verbDatabase.count)+1)) } func randomNumberGeneratorColumn() -> Int { //generates random number from 2 to number of columns with tenses return Int(arc4random_uniform(UInt32(countTenseColumns)+2)) } override func viewWillLayoutSubviews() { currentRow = self.randomNumberGeneratorRow() currentColumn = self.randomNumberGeneratorColumn() var columnName = "verbDatabase[0].\(columnNames[currentColumn])" verbLabel.text = verbDatabase[currentRow].infinitive tenseLabel.text = columnName }作为字符串处理，而不是将其拆分为单个字词，然后使用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; });和blogInput.toLowerCase()来解决套管问题。

如果您的目标是支持ES6或使用像Babel这样的转录程序的新浏览器，您可以简化为：

store.toLowerCase()

Answer 2

您需要将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;
}

突出显示匹配的文本

2 个答案: