Question

我必须创建一个接受两个参数的函数，一个选择器和一个字符串，它将所选元素的文本内容中的每个单词放在一个新的“span”元素中。每个新的'span'元素必须被赋予唯一的ID，通过组合前缀和顺序整数（例如par0，par1等）形成。此函数还需要处理嵌套的子元素......

任何有关创建此内容的帮助都将受到高度赞赏。谢谢......

Answer 1

如果你使用的是jQuery，那就不难了。这样的事情应该有效：

var sentence = "this is a sentence";
var words = sentence.split(" ");

$.each(words, function(i, w){
    $("#elementToAppendTo").append($("<span>").text(w));
});

将句子拆分为“”（空格）。 split函数返回一个数组。

对单词数组进行迭代，对于每个单词，在span元素中对其进行说明，然后追加到id为“elementToAppendTo”的某个html元素。

Answer 2

我认为这就是你所追求的目标。

首先，您需要使用document.querySelectorAll选择DOM元素，然后使用string.replace方法迭代元素，这将使用regex捕获任何单词并将其替换为模板（这是一个span wrapper）。

function doThing(selector, str) {
  document
    .querySelectorAll(selector)
    .forEach((element) => {
      element.innerHTML = str.replace(/(\w+)/g, `<span>$1</span>`);
    });
}

doThing('.latin', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.');

span {
  background-color: yellowgreen;
}

<div class="latin"></div>

每个单词上的JavaScript span元素

2 个答案: