首頁猿問用黃色背景突出顯示所有長度超過 8...

用黃色背景突出顯示所有長度超過 8 個字符的單詞。如何在不使用 jQuery 的情況下僅使用

JavaScript

蝴蝶刀刀 2022-12-02 16:55:34

我已經開始通過實踐練習學習 JavaScript。我嘗試通過以下方式解決這個問題，但它不起作用！任何線索將不勝感激。window.onload = function() { check = (word) => { if (word.length > 8) { word.style.color = "blue"; } else { word; } } func = () => { var str = document.querySelector("#Second").innerText; var newt = str.trim().split(' ').map(check).join(' '); document.querySelector("#Second").innerText = newt; }}

查看完整描述

3 回答

米脂

TA貢獻1836條經驗獲得超3個贊

我認為你的問題在于check()功能。你已經正確地分析了問題，但是你不了解 DOM 所以你做錯了。

首先，你檢查的單詞是純字符串（它是一個字符數組，所以你可以用length屬性檢查它）。其次，它.style.color只是 Element DOM 對象的子對象。字符串不能那樣做。

由于這個問題，您必須將剛剛檢查的字符串轉換為 Element DOM 對象。根據情況，有很多方法可以做到這一點。我假設輸出將是這樣的：

document.body.innerHTML += word

如果是這樣的話，你就可以放心了。只需將包裝word在這個 html 代碼字符串中。剩下的你已經很好地解決了。

（我知道你用的是innerText，但我覺得innerHTML更簡單，所以我選擇了它。如果你真的需要使用innerText，請在下面評論，我會更新帖子）

這是我的代碼：

window.onload = function() {

const check = word => {

if (word.length > 8) {

return '' + word + ''

} else {

return word

}

const sample = document.querySelector("#sample")

sample.innerHTML = sample

.innerText

.trim()

.split(' ')

.map(check)

.join(' ')

}

#sample {}

.hightlight {

background: yellow

}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

我的建議。在做任何事情之前，試著理解你正在處理的變量的類型。

反對回復 2022-12-02

慕田峪7331174

TA貢獻1828條經驗獲得超13個贊

window.onload = function() {

check = (word) => {

if (word.length > 8) {

word = '' + word + '';

} else {

word;

}

return word;

}

var str = document.querySelector("#Second").innerText;

var newt = str.trim().split(' ').map(check).join(' ');

document.querySelector("#Second").innerHTML = newt;

}

<div id="Second">Short short thiswordislong short short thiswordislongtoo short</div>

反對回復 2022-12-02

墨色風雨

TA貢獻1853條經驗獲得超6個贊

帶有 .|,|? 的版本檢測

const setup = () => {

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

wrapWordsWithLengthEight(p);

}

const check = (word) => {

//Check if word include a .|,|?

const hasCharacter = word.includes(".", word.length - 1)

|| word.includes(",", word.length - 1)

|| word.includes('?', word.length - 1);

//Calculate real word length

const wordLength = hasCharacter ? (word.length -1) : word.length;

if(wordLength > 8) {

const spanContent = hasCharacter ? word.substring(0, word.length - 1) : word;

const endCharacter = hasCharacter ? (word.substring(word.length - 1)) : '';

word = `${spanContent}${endCharacter} `;

}

else word = `${word} `;

return word;

};

const wrapWordsWithLengthEight = (target) => {

//Render HTML to target

const text = (target.textContent).trim().split(' ').map(check).join('');

target.innerHTML = text;

}

window.addEventListener('load', setup);

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique enim quod quos, modi architecto, praesentium tenetur suscipit assumenda, sit neque odit, illum minima voluptates? Dolor non dolore accusamus quam maiores.

反對回復 2022-12-02

3 回答
0 關注
126 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

用黃色背景突出顯示所有長度超過 8 個字符的單詞。如何在不使用 jQuery 的情況下僅使用

用黃色背景突出顯示所有長度超過 8 個字符的單詞。如何在不使用 jQuery 的情況下僅使用

3 回答

添加回答

用黃色背景突出顯示所有長度超過 8 個字符的單詞。如何在不使用 jQuery 的情況下僅使用

用黃色背景突出顯示所有長度超過 8 個字符的單詞。如何在不使用 jQuery 的情況下僅使用