Question

我正在尝试＆＃34;突出显示＆＃34;创建字符串后字符串中的特定单词。

我目前正在这样做：

var keywords = [
    "Monday",
    "monday",
    "Tuesday",
    "tuesday",
    "Wednesday",
    "wednesday",
    "Thursday",
    "thursday",
    "Friday",
    "friday",
    "Saturday",
    "saturday",
    "Sunday",
    "sunday"
    ];    

function highlightImportant(that) {
    that.find('.email-container').each(function(){
        var full_text = $(this).text();
        $.each(keywords, function(i){
            full_text = full_text.replace(keywords[i], "<b>"+keywords[i]+"</b>");
            $(this).text(full_text);
        });
    });
}

在此结束时调用此函数：

function getEmails(email, name) {
    console.log("working...");
    $('.contact--details__show__emails').empty();
    $.post('php/contacts-get-email.php', {email:email}, function(data) {
        var email_body = data.split("<:>");
        $.each(email_body.reverse(), function(i){
            if(email_body[i]) {
                var direction = email_body[i].split(':dir:')[0];
                var email_text = email_body[i].split(':dir:')[1].split(':date:')[0];
                var email_date = email_body[i].split(':dir:')[1].split(':date:')[1];
                var d = new Date(0);
                d.setUTCSeconds(email_date);
                if(direction === "TO"){
                    var initial = "Us"; 
                } else {
                    var initial = name; 
                }
                var email_block = $('<div class="emailBlock dir-'+direction+'" style="opacity:0;">\
                                    <div class="avatar">'+ initial +'</div>\
                                    <div class="email-container">'+email_text+'</div>\
                                    <div class="date">'+d+'</div>\
                                </div>');
                $('.contact--details__show__emails').append(email_block);
                email_block.delay(100*i).animate({"opacity":"1"}, 500);
                highlightImportant($('.contact--details__show__emails'));
            }
        }); 
    }); 
}

这似乎应该可行，当我console.log事件时，我看到它为每个容器运行每个关键字，但似乎即使它们存在也找不到关键字。

我希望看到的是我有这样的字符串：

var string = "Let's meet Monday or Tuesday";

我想让它们变成粗体，就像这样：

＆＃34;让我们见星期一或星期二＆＃34;

有什么想法吗？

Answer 1

两个问题。首先，$(this)循环中的$.each不是DOM元素！第二个问题：您使用$(this).text(full_text)，但想要设置....html(full_text)。您正在使用html标记突出显示单词（<b>），如果您使用text

将删除这些单词

var keywords = [
    "Monday",
    "monday",
    "Tuesday",
    "tuesday",
    "Wednesday",
    "wednesday",
    "Thursday",
    "thursday",
    "Friday",
    "friday",
    "Saturday",
    "saturday",
    "Sunday",
    "sunday"
    ];    
function highlightImportant(that) {
    that.find('.email-container').each(function(){
        var full_text = $(this).html(),
            element = $(this);
        $.each(keywords, function(i){
            full_text = full_text.replace(keywords[i], "<b>"+keywords[i]+"</b>");
        });
        element.html(full_text);
    });
}

highlightImportant($("#container"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="email-container">Let's meet Monday or Tuesday</div>
</div>

Answer 2

此行中有两个错误：

this

1）html()指向字符串而不是DOM元素; 2）如果您希望标记进入元素，则应使用String.replace()方法。

您使用的表单中的that.find('.email-container').each(function(){ var full_text = $(this).text(); $.each(keywords, function(i) { full_text = full_text.replace(new RegExp(keywords[i],"gi"), "<b>"+keywords[i]+"</b>"); }); $(this).html(full_text); });将仅替换第一个条目，因此您应该这样做：

{{1}}

Answer 3

更简单的解决方案：

＆＃13;

var string = "Let's meet Monday or Tuesday";

function highlightKeyword(string) {
  return string.replace(/(Monday|monday|Tuesday|tuesday|Wednesday|wednesday|Thursday|thursday|Friday|friday|Saturday|saturday|Sunday|sunday)/g, "<strong>$&</strong>");
}

$('p').html(highlightKeyword(string));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p></p>

＆＃13;

jQuery替换字符串中的单词数组

3 个答案: