如何解决如何突出显示段落中大于或等于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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。