如何突出显示段落中大于或等于 8 个字符的单词？ JavaScript

Question

我试图突出显示段落中等于或大于 8 个字符的单词。我试图从其他来源添加一些代码，但它不起作用。这是代码：

enter code here
let txt=document.createElement("p").innerText;

 function highlightWords() {
     let words = txt.split(" ");
     let size = 8
     for (let i = 0; i < words.length; i++) {
         let word = words[i];
         let processedP = "<p>";
         if (index>=8) {
             innerText=innerText.substring(0,index)+ "<span class='lightext'>"+innerText.substring(index,index+txt.length)+ "</span>" + innerText.substring(index + txt.length);
         } else {
         }

         return txt;

     }
 }

 highlightWords();

JsBin我的网站

Answer 1

这是一个解决方案。

const p = document.getElementById('p');

const splitWords = p.innerHTML.split(' ');
const highlightedWords = splitWords.map((word) =>
  word.length >= 8 ? `<span class="highlight">${word}</span>` : word
);
const joinedWords = highlightedWords.join(' ');

p.innerHTML = joinedWords;

.highlight {
  color: green;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Parapgraph Highlight</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>


  <p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis porro praesentium quas quisquam recusandae? At cum dignissimos dolorem est eveniet id ipsum nesciunt optio, porro quasi quis sequi sunt suscipit.</p>

</body>

</html>

Answer 2

欢迎光临！你那里有很多正确的部分，只是需要以不同的方式将它们组合在一起。

我整理了一个完整的 HTML，所有这些都协同工作，并对工作原理发表了一些评论 - 希望这对您有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .lightext {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p id="targetp">This is the extremely long paragraph that we want to highlight all words longer than eight characters in.</p>
<script>


function highlightWords() {
    const txt = document.getElementById("targetp").innerText;
    let output = "";
    let words = txt.split(" ");
    let size = 8   //don't really need this - size as a variable isn't used anywhere else,
    let replacementword = ""; //this will store our output - it's easier than trying to update thee text "in place"
    for (let i = 0; i < words.length; i++) {
        let word = words[i];
        if (word.length >= 8) {  //this is where we figure out if the word is longer than 8
            replacementword = "<span class='lightext'>" + word + "</span>";  //if it is, we just need to wrap it in a span with lighttext class - assuming you have a "highlighted" style applied to class lightext, see styles above for mine
        } 
        else {
            replacementword = word;  //shorter than 8, don't need to change anything
        }
        output = output + " " + replacementword + " ";  //add the updated word to our output
    }

    return output; //return our finished output string to the function call
}

document.getElementById("targetp").innerHTML = highlightWords();   //actually update the <p> tag with the new text, WHICH is now HTML rather than just plain text
</script>

</body>
</html>

Answer 3

首先，您的 JSBIin 不工作，所以您可能想在 post 之前修复它，问题是 let txt=document.createElement("p").innerText; 您正在创建元素，实际上您应该正在阅读，querySelector

这只是实现结果的众多方法之一。

function highlightLongWords(txt, max = 8) {
  return txt.split(/(\s+)/g)
    .map(word => word.length >= max ? `<em>${word}</em>` : word)
    .join(" ");
}

// get your get from the DOM element
const p = document.querySelector("#p").innerText;

console.log(highlightLongWords(p)); // greater than or equal 8 characters
console.log(highlightLongWords(p, 12)); // greater than or equal 12 characters

解释如下：

拆分文本（就像您所做的那样）但是...

使用正则表达式 \s 是 space
/\s+/表示一个或多个spaces

使用map遍历每个单词
使用三元表达式检查字长：

如果>=8，用字符串模板改字用em
否则保持单词的原始值

将单词数组加入一个段落

最后请注意，此函数有第二个参数，可让您更广泛地使用它，并且它不使用全局变量，这意味着您可以将此代码放在任何地方，它会与您提供的参数一起工作。尽量不要使用全局变量 :D

希望对您有所帮助，如果您需要更多解释，请联系我。

如何突出显示段落中大于或等于 8 个字符的单词？ JavaScript

How can I can highlight words that are more or equal to 8 characters in paragraph? JavaScript

javascript

highlight