如何突出显示文本中具有5个或更多字母的所有单词

如何解决如何突出显示文本中具有5个或更多字母的所有单词

我正在尝试突出显示<p>元素中所有超过5个字符的单词。我可以选择这些单词，但是未能在屏幕上突出显示这些单词。我将不胜感激。请查看完整的代码JavaScript exercise

    let pElement = document.getElementById("text");

function highlightLongWords(element){

    let paragraph = pElement.textContent;
    let textInsideP = pElement.innerHTML = paragraph;


    // use String.split(" ") to split the paragraph into an array of words
    let words = paragraph.split(" ");

    console.log(words);

    let longestWord = "abcde";
    //use Array.length to get the length of the array.

    for(let word of words) {
        if (word.length > longestWord.length) {
            //console.log(word);
            let longWords = word;
            
            pElement.style.backgroundColor = "yellow"
            console.log(longWords);

            
            
        } 
    }

    return;
    
}

highlightLongWords(pElement);

解决方法

您可以使用正则表达式替换p元素的文本内容，以使符合条件的每个文本段都被替换为相同的内容，但包装在<span>元素中：>

let wrapTextInSpans = (elem,regex) => {
  // Takes an element,and a regex. The regex should have the "g" flag set
  elem.innerHTML = elem.innerHTML.replace(regex,'<span>$&</span>');
};
wrapTextInSpans(document.querySelector('p'),/[a-zA-Z]{5,}/g);

.highlight > span {
  background-color: rgba(255,0.2);
}

<p class="highlight">
  Hello,this is some sample text I have written for the illustrative purpose of detecting all
  linguistic words whose length is equal to or longer than five characters. I hope that this
  sample text combined with the accompanying javascript and css code is sufficient to solve
  your problem.
</p>

使用的正则表达式非常简单：

[a-zA-Z]       -> Any alpha character
        {5,}   -> Repeat minimum 5 times

如果您希望多个符合条件的连续单词共享相同的突出显示，则可以简单地扩展用于wrapTextInSpans的正则表达式：

let wrapTextInSpans = (elem,}([^a-zA-Z]*[a-zA-Z]{5,})*/g);

.highlight > span {
  background-color: rgba(255,this is some sample text I have written for the illustrative purpose of detecting all
  linguistic words whose length is equal to or longer than five characters. I hope that this
  sample text combined with the accompanying javascript and css code is sufficient to solve
  your problem.
</p>

使用的正则表达式稍微复杂一些：

[a-zA-Z]                                 -> Alpha character
        {5,}                             -> Repeat minimum 5 times
            (                      )*    -> Repeat any number of times (including 0)
             [^a-zA-Z]*                  -> Any number of non-alpha characters (allowing punctuation to break up matching words)
                       [a-zA-Z]{5,}      -> 5 or more alpha characters

,

在这里，我为您的案例编写了小助手功能，请检查并阅读评论

// Highlight function
const hl = (s,e) => {
  // Shortcut <p>
  const p = document.getElementById("myText");
  // Get content of target <p>
  let text = p.textContent;
  // Write custom replace function
  text = text.replace(new RegExp('(\\w+)','g'),(m) => {
    // Check if word is equal or greater or
    // has maximum parameter
    if(m.length >= s && (e && m.length <= e || !e)) return `<span class="yellow">${m}</span>`;
    else return m;
  });
  // Replace <p> with altered text
  p.innerHTML = text;
}

// Test by providing target length+ 
// BONUS: as second parameter you can pass
// maximum length,i.e: hl(6,9);
hl(6);

.yellow {
  background-color: yellow;
}

<p id="myText">
JavaScript (JS) is a lightweight,interpreted,or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages,many non-browser environments also use it,such as Node.js,Apache CouchDB and Adobe Acrobat.
</p>

,

每个人。感谢您抽出宝贵时间回答我的问题。看到不同的解决方案非常有价值。

我的解决方案有点简单，因为我对regex不熟悉。我使用.split（）方法将文本转换为数组，然后使用for循环来识别长字，并使用mark元素将其包装以突出显示它们。

let pElement = document.getElementById("text");

function highlightLongWords(element){

let longestWord = "abcde";
const words = element.textContent.split(" ");

for(let i = 0 ; i < words.length; i++){

    if(words[i].length > longestWord.length){

        element.innerHTML = element.innerHTML.replace(words[i],`<mark>${words[i]}</mark>`)

    }
}  

return;
}

highlightLongWords(pElement);

<p id="text">
  This sample text has highlighted words. Why are some words highlighted and others are not? Well,the highlighted words are 5 characters long,or longer. The non-highlighted words are shorter than 5 characters long.
</p>