Javascript 从数组中选择并操作单词

如果满足条件，我想给数组中的单词加下划线，但我只能选择索引作为变量，如何将它变成一个元素，然后在可能的情况下给它加下划线。这里有一些代码来说明我的意思

var textArr = $(div).text().split(/\b/);

for (i = 0; i < textArr.length; i++) {

    if ($('#search').val().match(new RegExp(textArr[i], "i"))) {

     //pseudo code
      $(textArr[i]).css('text-decoration','underline');
    }
}

---

要转换psuedo代码，这可能是一个解决方案：

$('<span>'+textArr[i]+'</span>').css('text-decoration','underline')
.appendTo('body'); // or any selector

---

基本上，您正在创建一个新元素并使用.css对其进行样式设置，然后使用.append将其附加到一个容器中。这里有一个不涉及循环的解决方案。可提供样品溶液：

HTML jQuery代码

---

[编辑]更新了代码，使其更加模块化和可重用。不幸的是，这段代码将去掉两个空格

既然您还没有发布搜索内容，我假设它是一个单词

这个jQuery函数应该完全满足您的需要

jQuery.fn.underline = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<span class=\"" + className + "\">" + match + "</span>";
            });
        });
    });
};

$("#textDiv").underline($("#search").text(), "underlinedText");

---

为我们一起扔一把小提琴怎么样？这样我们可以更容易地帮助你。我喜欢这个问题，如果有小提琴的话，肯定会解决的！这很好，但它会在另一个文本旁边添加新的带下划线的文本，而不是替换它。谢谢+1@user2014429要替换的文本是什么？在div from中：var textArr=$div.text.split/\b/；谢谢你的提琴。我可以使用很多代码+1谢谢！你帮我破了1000分；祝你的代码好运！如果你有时间，介意检查一下这把小提琴吗：。我正在尝试制作多个目标div，但进展不顺利。谢谢你看一眼。您需要运行.each函数并将该代码应用于每个匹配项。这太好了。我曾尝试使用each函数，但每次迭代都会复制和连接字符串。我一定是弄错顺序了。你帮了大忙。非常感谢，很高兴我能帮你翻到4位数；

em {
    text-decoration: underline;
    background-color: yellow;
}

$('#search').on('change', function(e) {
    highlight('#toUnderline', $(this).val());
});

function highlight(selector, search) {
    var target = $(selector);
    var re = new RegExp(search, 'i');
    var wrapper = '<em>';
    target.html(
        target.text()
            .match(/\w+/g)
            .map(function (word) {
            return (word.search(re) > -1 
                    ? $(wrapper)
                        .text(word)
                        .wrap('<p>')
                        .parent()
                        .html()
                    : word);
        }).join(' ')
    );
}

jQuery.fn.underline = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<span class=\"" + className + "\">" + match + "</span>";
            });
        });
    });
};

$("#textDiv").underline($("#search").text(), "underlinedText");