个人中心
gpt4 book ai didi

javascript - 突出显示数组中的单词

转载 作者：行者123 更新时间：2023-12-05 09:28:35 26 4
gpt4 key购买 nike

我有两个问题:

  1. 阵列拆分功能，因为我不能使用它不知道为什么？
  2. 单词没有突出显示。

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>

最佳答案

因此，存在一些问题。我假设您更改了测试代码，因为您没有在任何地方调用函数 selectWord()(并且该元素已被注释掉)。

你不能使用 .split('') 因为它会将字符串分解成单个字符，而不是单词，所以所有的长度都是 1。你需要同时更改你的 split 和 join 为 .split(' ') 和 .join(' ')。

另请注意，您的 text 变量是一个数组，而不是 DOM 对象。因此它不具有 innerHTML 和 innerText 属性

正确的脚本应该是。

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')

关于javascript - 突出显示数组中的单词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71279559/

26 4 0
文章推荐： java - 数组操作 : adding elements
文章推荐： r - 创建组 ID 序列但省略特定行
文章推荐： flutter - 如何在不使用 FittedBox 的情况下使文本适合容器
文章推荐： c - 将 strtok 存储在数组中 ~ C
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com