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

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) code> 会造成多余的空间。 我如何使用正确的正则表达式来使用原始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~'))