Цветные слова (ключевые слова) в тексте, который находится внутри <td>

Я работаю в проекте, и теперь мне нужно сделать то, что я не знаю. Я хочу, чтобы цветные слова (ключевые слова) были напечатаны в тексте, который находится внутри <td>Цветные слова (ключевые слова) в тексте, который находится внутри <td>

Я могу сделать это статическим, потому что тексты случайны, они поступают из базы данных.

Его нормальный текст, я хочу, чтобы цветные слова типа «животное, домашнее животное», что-то вроде этого. И укажите конкретный цвет для каждого из них, например, для животных, таких как красный, и для домашних животных, как синий цвет шрифта.

Я думаю, что я должен использовать JQuery для этого и сделать функцию, чтобы сделать это после загрузки страницы (readyFunction).

Но у меня нет никаких идей для этого, я новичок в jquery. Не могли бы вы дать мне несколько идей?

Спасибо!

источник

2017-02-09 Jonas F

Это действительно «грязный» решение, но будет служить вам в качестве примера о том, как подойти к вашей задачи:

<body> 
    <table id="the_table"> 
    <tr> 
    <td>random words from DB: like an apple, pet, whatever, yet another apple</td> 
    </tr> 
    </table> 
    <script> 
    $(document).ready(function() { 
    var content_cell, 
    random_words = "", 
    colors_map = { 
     "apple": "red", 
     "pet": "blue" 
    }; 
    // selector for your specific table cell 
    $('#the_table tr').each(function() { 
     content_cell = $(this).find("td:first");  
    }); 
    // get cell content 
    random_words = content_cell.html(); 
    // replace your keywords according the map 
    $.each(colors_map, function(index, value) { 
     random_words = random_words.replace(new RegExp(index, 'g'), "<font color='" + value + "'>" + index + "</font>"); 
    }); 
    // set back html content into the cell 
    content_cell.html(random_words); 
    }); 
    </script> 
</body>

источник

2017-02-09 17:18:42

Спасибо за суждение, я собираюсь использовать его в качестве примера. Можете ли вы объяснить мне эту строку? "$ .each (colors_map, function (index, value) { random_words = random_words.replace (новый RegExp (индекс, 'g')," "+ index +" "); }); " - Я не понимал, что я заменяю? Для того, что я вижу, я делаю цикл в colorsMap, но это все, что я получил ... –

Внутри функции $ each handler вы получите ключ и значение каждого элемента этого цвета на карте ключевых слов. Каждый раз, когда вы пытаетесь найти «индекс» в тексте с RegEx глобально (все записи). Если найдено, вы заменяете каждый из них одним и тем же «индексом», но обернут тегом , где цвет установлен на «значение» вашей карты. Если ничего не найдено, итератор $ каждый перейдет к следующей записи карты и так далее. Дайте мне знать, если что-то еще не ясно. –

Спасибо за объяснение лучше, я считаю, что мне нужно немного поменять. Но я потрясающе, очень хорошее решение. Вы действительно думаете, что это «грязно», так что я могу сделать это лучше? –

Пусть ваш HTML5 поддержки браузера, без JQuery не нужно, попробуйте следующий код:

function renderKey(){ 
    //create color list in case you don't want to get invisible color such as 'white' from random color.. 
    // make the list long enough to avoid duplicated color 
    var colors = ['red', 'blue', 'orange', 'cyan', 'black']; 
    var keyColor = {}; 
    var keyIndex = 0; 

    //you may need more selectors to exclude unexpected elements, e.g. <td> in <thead>. 
    var x = document.querySelectorAll("td");  
    for (i in x){ 
    //suppose your key words seperated by ',' in <td> 
    var keyWords = x[i].innerHTML.split(',');  
    x[i].innerHTML = keyWords.reduce(
     function(total, value, index){ 
     return total + '<span style="color:' + 
      (keyColor[value] || (keyColor[value] = colors[ keyIndex++ % colors.length])) + 
      '">' + value + '</span>'; 
     }, 
     '' 
    );  
    } 
}

источник

2017-02-09 18:05:55 chenxin

Спасибо за супруг, я собираюсь использовать его в качестве примера. Потому что мне нужно покрасить слова с определенным цветом, например, слово «домашнее животное» всегда имеет синий цвет. И не раскрашивайте слова thar не мои ключевые слова. Но это поможет мне! –

Цветные слова (ключевые слова) в тексте, который находится внутри <td>

ответ

Смежные вопросы