在文本中查找单词并使用粗体和颜色的文本创建单词:红色

时间:2016-08-02 12:39:47

标签: javascript html

无法改变创建单词的样式,我知道如何找到两种方式,比如indexof和regex,但是如何用已建立的索引等改变样式?所以如果不久我想做那样的事情: 要找的话: OSQ,KKW 文本: aaa bbb osq osq qjweqj kkw

 $(".findwords").click(function()
{
    var text = $("#text").val();
    var words = $("#words").val();
    var arrword = words.split(',');
    $.ajax({
        beforeSend:function()
        {
            $("#lback-words").show();
            $("#lback-text").show();
            $('.loader').show();
        },
        url: "/Demo2/Fwords/",
        data: data = { "text": text, "words": words },
        method: 'POST',
        dataType: 'json',
        success: function (data) {
            $('#text').val(' ');
            $('#words').val(' ');
            setTimeout("$('.loader').hide()", 3000);
            setTimeout("$('#lback-words').hide()", 3000);
            setTimeout("$('#lback-text').hide()", 3000);
            console.log(data);
            var sub_ul = $('<ul/>');
            $.each(data, function (index, value) {
                console.log(value);
                var sub_li = $('<li/>');
                $(sub_li).html(value.w + "-" + value.q);
                $(sub_li).appendTo(sub_ul);
            });
            var appendContent = $("<section class='searchresult'><h4>Result:</h4><div class='words'>Words:</div><div class='text'>Text:<br>" + text + "</div></section>");
            $(appendContent).find(".words").append(sub_ul);
            $(".texnwords").append(appendContent);
        },
        error: function (data) {
        console.log(data);
        }
})

1 个答案:

答案 0 :(得分:0)

试试这个:

var html = $('.your_text_element').html();
html  = html.replace('osq', '<b>osq</b>');
$('.your_text_element').html(html);

更新

// get values of text and words
var text = $("#text").val();
var words = $("#words").val();
// check if text contains words
var text_after_check = text.replace( words, '<b>' + words + '</b>');
if( text != text_after_check ){
    // words found
    // add html with hightlighted text to div check_result
    $('#check_result').html(text_after_check);
    // hide textarea (optional)
    $("#text").toggle();        
}

在你的HTML中添加id为id = check_result的div