I have 2 issues:
const text = [
`Jelly sweet roll jelly beans biscuit pie macaroon chocolate donut. Carrot cake caramels pie sweet apple pie tiramisu carrot cake. Marzipan marshmallow croissant`
]; // this is what i want to use instead of 'p' but also below not working
function selectWord() {
//const p = document.querySelector('p');
text.innerHTML = text.innerText
.split('')
.map((word) =>
word.length > 5 ? `<span class="lightext">${word}</span>` : word
)
.join('');
}<!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>This is the extremely long paragraph that we want to highlight all words longer than eight characters in.</p>
</body>
<script src="app1.js"></script>
</html>So, there are a few issues. I assume you changed the code for testing because you're not calling the function selectWord() anywhere (and the element is commented out).
You cannot use .split('') because that breaks strings into individual characters, not words, so everything has a length of 1. You need to change both your split and join to be .split(' ') and .join(' ').
Please also note, your text variable is an array, not a DOM object. Therefore it does not posses the innerHTML and innerText properties
The correct script would be.
function selectWord(str) {
const el = document.querySelector("p")
const highlightedText = str.split(' ').map((word) => word.length > 5 ? `<span class="lightext">${word}</span>` : word).join(' ')
el.innerHTML = highlightedText
}
selectWord('this is a longer string than normal')
I simply fixed the obvious bugs in your code. Most notably, splitting words on spaces (where you had an empty string) and then reassembling them by the same.
function selectWord() {
const p = document.querySelector('p');
console.log(p.innerText.split(' '));
p.innerHTML = p.innerText
.split(' ')
.map((word) =>
word.length > 5 ? `<span class="lightext">${word}</span>` : word
)
.join(' ');
}
selectWord();<!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>This is the extremely long paragraph that we want to highlight all words longer than eight characters in.</p>
</body>
<script src="app1.js"></script>
</html>const text = `Jelly sweet roll jelly beans biscuit pie macaroon chocolate donut. Carrot cake caramels pie sweet apple pie tiramisu carrot cake. Marzipan marshmallow croissant`; // this is what i want to use instead of 'p' but also below not working
function selectWord() {
const p = document.querySelector('p');
p.innerHTML = text
.split(' ')
.map((word) =>
word.length > 5 ? `<span class="lightext">${word}</span>` : word
)
.join(' ');
}
selectWord();<!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>This is the extremely long paragraph that we want to highlight all words longer than eight characters in.</p>
</body>
<script src="app1.js"></script>
</html>