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

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

JavaScript

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

我已經(jīng)開始通過實(shí)踐練習(xí)學(xué)習(xí) JavaScript。我嘗試通過以下方式解決這個(gè)問題，但它不起作用！任何線索將不勝感激。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貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個(gè)贊

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

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

由于這個(gè)問題，您必須將剛剛檢查的字符串轉(zhuǎn)換為 Element DOM 對(duì)象。根據(jù)情況，有很多方法可以做到這一點(diǎn)。我假設(shè)輸出將是這樣的：

document.body.innerHTML += word

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

（我知道你用的是innerText，但我覺得innerHTML更簡單，所以我選擇了它。如果你真的需要使用innerText，請(qǐng)?jiān)谙旅嬖u(píng)論，我會(huì)更新帖子）

這是我的代碼：

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.

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

反對(duì) 回復(fù) 2022-12-02

慕田峪7331174

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

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>

反對(duì) 回復(fù) 2022-12-02

墨色風(fēng)雨

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超6個(gè)贊

帶有 .|,|? 的版本檢測(cè)

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.

反對(duì) 回復(fù) 2022-12-02