主页 / 问题 / 1592917
Accepted
alexWithoutBeard
Asked:2024-09-05 19:10:45 +0000 UTC2024-09-05 19:10:45 +0000 UTC

将文本中的每个分数放入一个跨度中

  • 772

给定一个段落，其中包含带有单词和形式为 1/2 的分数的文本。还给出了一个按钮。单击按钮后，将每个分数放入其自己的范围标签中。在下面的代码中，我能够将每个元素包装在一个跨度中，但在包装分数时遇到问题。我尝试使用正则表达式（因为数组包含字符串值）并使用包含检查单词，但它没有按预期工作）

let p = document.querySelector("p");
let res = [];
document.querySelector("button").addEventListener("click", function() {
  let arr = p.innerText.split(" ").forEach((word) => { //делаю перебор всех элементов массива
    let elem = document.createElement("span"); // создаю span
    elem.innerText = word; // добавляю в span слова 
    res.push(elem.outerHTML);
    // отправляю все слова со span в массив
  });
  p.innerHTML = res.join(" ");
  // заменяю исходный текст текстом в span элементах
});
<p>
  Lorem 1/2 ipsum dolor sit amet, 2/4 consectetur adipisicing elit. 3/6 Pariatur enim 4/8 omnis non blanditiis, dolore illo ullam labore autem sit. Illum beatae dolores ipsam blanditiis excepturi reiciendis quibusdam necessitatibus error atque.
</p>
<button>Press me</button> <br />

javascript

1 个回答

  1. Best Answer

    您的代码中的代码有点太多了...我怀疑如果允许正则表达式并且文本中没有其他标记，可以做得更简单：

    let p = document.querySelector('p');
document.querySelector('button').addEventListener('click', function() {
  p.innerHTML = p.textContent.replace(/\d+\/\d+/g, '<span class="fract">$&</span>')
});
    .fract { color: red; }
    <p>
  Lorem 1/2 ipsum dolor sit amet, 2/4 consectetur adipisicing elit. 3/6 Pariatur enim 4/8 omnis non blanditiis, dolore illo ullam labore autem sit. Illum beatae dolores ipsam blanditiis excepturi reiciendis quibusdam necessitatibus error atque.
</p>
<button>Press me</button>

    • 2

相关问题