поместив теги html вокруг совпадений в строке

Question

Я искал ответ, но не смог найти его для моего конкретного случая использования. Я пытаюсь сделать все совпадения (исходящие от объекта словаря) в строке зелеными, благодаря HTML-теги.

В частности, есть случай, когда я не нашел способ решить (объясненный после моего кода).

var data = "cat fish"; 

var dictionary = { 
    "regex1": "cat", 
    "regex2": "cat fish" 
} 


function buildColoredString(data, dictionary) { 
    var coloredString = data; 

    for (var prop in dictionary) { 
     var toReplace = new RegExp(dictionary[prop].regex, "g"); 
     var newString = "<b style='color: green;'>" + dictionary[prop].regex + "</b>"; 
     coloredString = coloredString.replace(toReplace, newString); 
    } 

    console.log(coloredString); 
} 

При запуске buildColoredString я получаю только «кошку», чтобы быть в окружении HTML тегов, но не «сома», так как это не сопрягая благодаря HTML тегов, находящихся в настоящее время в строке я в здании. Любая идея, как решить эту проблему и получить «кошку» & «кошачья рыба», окруженная тегами HTML (я не против, если есть слишком много тегов, которые делают некоторые из них бесполезными с визуальной точки зрения.

за вашу помощь, имеют хороший день!

Answer 1

Сортируйте словарь по размеру String. у «сома» первый, затем «кошка» второй ...

Answer 2

Вы можете просто запустить замену cat fish регулярок первым. Здесь «словарь» преобразуется в список для сохранения порядка.

Вы также можете использовать $1 ссылаться на совпавший текст:

var data = "cat fish"; 

var arr = [ 
    "cat fish", 
    "cat", 
] 


function buildColoredString(data, arr) { 
    var coloredString = data; 

    for (var regex in arr) { 
     var toReplace = new RegExp("(" + arr[regex] + ")", "g"); 
     var newString = "<b style='color: green;'>$1</b>"; 
     coloredString = coloredString.replace(toReplace, newString); 
    } 

    console.log(coloredString); 
} 

Answer 3

Как cat fish содержит cat, вам нужно искать для них в то же самое время, больше первого.

Вы можете сделать это, поместив строки, которые вы хотите выделить в массиве, как Мартин предложил, но и использовать их в же группы, разделяющей их с |.

var arr = [ 
    "cat fish", 
    "cat", 
]; 

function buildColoredString(data, arr) { 
    var coloredString = data; 
    var replaceGroups = arr.join('|'); 

    var toReplace = new RegExp("(" + replaceGroups + ")", "g"); 
    var newString = "<b style='color: green;'>$1</b>"; 
    coloredString = coloredString.replace(toReplace, newString); 

    console.log(coloredString); 
}; 

Я предоставил jsfiddle, который окружает как cat и cat fish с тэгами в одном предложении, не дублируют друг друга.