JavaScript span元素

Question

我必须创建一个函数，它接受两个参数，一个选择器和一个字符串，它将把选定元素的文本内容中的每个单词放到一个新的“span”元素中。每个新的“span”元素必须有一个唯一的ID，由前缀和一个连续整数（如par0、par1等）组合而成。该函数还需要处理嵌套的子元素...

任何帮助创建这将是高度赞赏的。谢谢你...

Answer 1

我想这就是你想要的。

首先，您需要使用Document.QuerySelectorAll选择DOM元素，然后使用String.replace方法迭代元素，这使用regex捕获任何单词并用模板替换它们（这是一个span包装器）。

null

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>

Answer 2

如果您正在使用jQuery，这并不困难。类似这样的事情应该会起作用：

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

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

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

迭代words数组，对于每个单词，在span元素中rap它，然后用id“ElementToAppendTo”追加到某个html元素。