Javascript/jQuery - 需要在页面上查找原始文本，将后面的内容捕获到变量中，并用 HTML 替换原始文本

Question

假设页面上出现文本 KEYWORDANIMAL:(Cat)。我想在页面中搜索 KEYWORDANIMAL 的所有实例，然后将实际的动物(在本例中为 Cat)拉入一个变量，以便在另一个脚本中使用，该脚本将拉入相关内容。我还想将 KEYWORDANIMAL:(Cat) 替换为带有串联 ID 的空 div，以便由其他脚本作为目标(该其他脚本本身已经可以正常工作)。

我在这里使用了其他几个线程的信息，但无法将它们全部整合在一起。

-Find text string using jQuery?

-Get text from character and after using jQuery

-How do I use JQuery to replace all occurring of a certain word in a webpage?

这是我到目前为止所拥有的:

<p>Here is an animal: KEYWORDANIMAL(Cat)</p>

var findString = $('p:contains("KEYWORDANIMAL")').html();
var startIDString = findString.indexOf('(') + 1;
var endIDString = findString.indexOf(')');
var animalID = findString.substring(startIDString, endIDString);
var embedString1 = "<div id=\"";
var embedString2 = "\"></div>";
var embedStringFull = embedString1 + "animal" + animalID + embedString2;
alert(embedStringFull);

findString.each(function () {
    var newDIV = $(this).html().replace('KEYWORDANIMAL', embedStringFull);
    $(this).html(newDIV);
});

fiddle 形式:http://jsfiddle.net/dC6bj/1/

我找到了查找部分(虽然可能不是很有效)，但我显然在替换过程中遗漏了一些东西。

Answer 1

如果您绝对必须使用 JavaScript 执行此操作，则可以使用正则表达式替换函数:

var animal_regex = /KEYWORDANIMAL\((.*?)\)/g;

$('p:contains("KEYWORDANIMAL")').each(function() {
    var $this = $(this);
    var html =  $this.html().replace(animal_regex, function(match, name) {
        return '<div id="animal' + name + '"></div>';
    });

    $this.html(html);
});

演示:http://jsfiddle.net/dnuaL/

如果可能的话，这应该在服务器端完成。