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

问题描述

我试图突出显示段落中等于或大于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我的网站

解决方法

这是一个解决方案。

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>

欢迎光临！您那里有许多合适的部件，只需要将它们放在一起有点不同即可。

我整理了一个完整的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>

首先，您的JSBIin不能正常工作，因此您可能要在发布前解决该问题，问题是let txt=document.createElement("p").innerText;在那里您正在创建Element，实际上您应该使用{ {1}}

这只是获得结果的多种方法之一。

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表示一个或多个空格

使用/\s+/遍历每个单词
使用三元表达式检查单词长度：

如果它是> = 8，则使用字符串模板来更改单词，并用map包裹起来
否则请保留单词的原始值

将单词数组加入一个段落

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

希望有帮助，如果您需要更多说明，请ping me。

highlight javascript

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

问题描述

解决方法

相关问答