Question

我正在尝试使用其他people's code

突出显示搜索文本中的所有字词

JavaScript代码在这里：

var s = document.querySelector('input[type="search"]'),
    p = document.querySelector('p'),
    find = function(){
        var words = p.innerText.split(' '),
            i = words.length,
            word = '';

        while(--i) {
            word = words[i];
            if(word.toLowerCase() == s.value.toLowerCase()){
                words[i] = '<span class="highlight">' + word + "</span>";
            }
            else{

            }   
        }

        p.innerHTML = words.join(' ');
    }

s.addEventListener('keydown', find , false);
s.addEventListener('keyup', find , false);

但是，在此代码中，如果要搜索以“。”结尾的单词，则不会给我正确的内容。我发现，它是由var words = p.innerText.split(' ')引起的，但如果我使用split(/\b(\w+)\b/g)，它将导致额外的空间。如何使用正确的正则表达式来使用原始js来完成此操作？

Answer 1

你将无法一次性完成，你需要做的是首先使用你已经在上面做过的空白区域分割p.innerHTML，但是利用另一个函数来区分单词和标点符号。我写了一个你可能觉得有用的功能来解决你的问题。运行代码以查看示例输出。

//  This function will return the HTML for highlighting the word if successful
//  Othewise, it will return undefined

function highlightWord(originalWord, newWord) {
  let re = /[.,:;]+$/
  if (originalWord === newWord) {
    return `<span class="highlight">${newWord}</span>`
  } else if (re.test(newWord)) {
    let contains = new RegExp(`^${originalWord}`);
    let nonContainingPart = new RegExp(`[^${originalWord}]+`)
    if (contains.test(newWord)) {
      let word = newWord.match(contains)
      let punctuation = newWord.match(nonContainingPart)
      // Sample output of 'word' and 'punctuation'
      //word = [ 'book', index: 0, input: 'book...' ]
      //punctuation = [ '...', index: 4, input: 'book...' ]
      return `<span class="highlight">${word}</span>${punctuation}`
    }
  }
}

console.log(highlightWord('book', 'book'))
console.log(highlightWord('book', 'book.'))
console.log(highlightWord('book', 'book...'))
console.log(highlightWord('book', 'book:'))
console.log(highlightWord('book', 'book;'))
console.log(highlightWord('booker', 'book;'))
console.log(highlightWord('books', 'book;'))
console.log(highlightWord('book', 'booka'))
console.log(highlightWord('book', 'book-'))
console.log(highlightWord('book', 'book_'))
console.log(highlightWord('book', 'book~'))

如何使用原始javascript正确突出显示单词？

1 个答案: