我试图突出显示段落中等于或大于 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我的网站
你有很多合适的部分，只需要把它们以不同的方式组合起来即可。
我已经整理了一个完整的 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>这是一个解决方案。
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>首先，你的 JSBIin 不起作用，所以你可能想在发布之前修复它，问题是
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/\s+/mapem最后请注意，该函数有第二个参数，允许您更广泛地使用它，并且它不使用全局变量，这意味着您可以将此代码放在任何地方，它将与您提供的参数一起使用。尽量不要使用全局变量:D