Question

如果满足条件，我想在数组中加下字，但我只能选择索引作为变量，如何将其作为一个元素然后加下划线（如果可能的话）。这是一些显示我的意思的代码。

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

Answer 1

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

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

基本上，您正在创建一个新元素并使用.css()设置样式，然后使用.append()

将其附加到容器

Answer 2

由于您尚未发布search的内容，我假设它只是一个单词。

这个jQuery函数borrowed from here应该完全符合你的需要。

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");

Here's a working fiddle.

Answer 3

这是一个不涉及循环的解决方案。可以使用示例解决方案 at this jsFiddle：

HTML

<label>
    Highlight:
    <input type="text" id="search" 
        placeholder="Enter a regular expression"/>
</label>
<!-- Text to underline below -->
<p id="toUnderline"> ... </p>

CSS

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

jQuery代码

$('#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(' ')
    );
}

[edit]更新了代码，使其更具模块性和可重用性。不幸的是，这段代码会删除双倍空格......

选择并操作数组中的单词

3 个答案:

HTML

CSS

jQuery代码