Javascript/jQuery — нужно найти необработанный текст на странице, записать то, что следует, в переменную и заменить оригинал HTML

Допустим, на странице появляется текст KEYWORDANIMAL:(Cat). Я хочу найти на странице все экземпляры KEYWORDANIMAL, а затем добавить фактическое животное, в данном случае кошку, в переменную, которая будет использоваться в другом скрипте, который будет извлекать соответствующий контент. Я также хочу заменить KEYWORDANIMAL:(Cat) пустым div с объединенным идентификатором, на который будет нацелен другой скрипт (этот другой скрипт уже работает нормально сам по себе).

Я использовал информацию из нескольких других потоков здесь, но просто не могу собрать все вместе.

-Найти текстовую строку с помощью jQuery?

-Получить текст из символа и после использования jQuery

-Как мне использовать JQuery для замены всех вхождений определенного слова на веб-странице?

Вот что у меня есть до сих пор:

<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);
});

В форме скрипки: http://jsfiddle.net/dC6bj/1/

Я получил часть поиска (хотя, возможно, не очень эффективно), но мне явно чего-то не хватает при замене.


javascript jquery find replace
person Chaz    schedule 15.03.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Если вам абсолютно необходимо сделать это с помощью 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/

Это должно быть сделано на стороне сервера, если это возможно.

person Blender    schedule 15.03.2013
comment
Спасибо, если бы я мог сделать это на стороне сервера, я бы сделал это, но в этом приложении это невозможно. Можете ли вы объяснить мне эту строку: 'var html = $this.html().replace(animal_regex, function(match, name) {' В частности, как определяются совпадение и имя? Это функция замены? Или регулярное выражение ? - person Chaz; 18.03.2013
comment
@Chaz: это функция замены: разработчик. mozilla.org/en-US/docs/JavaScript/Reference/ - person Blender; 18.03.2013

arrow_upward
0
arrow_downward

Для вашего третьего вопроса о том, как заменить все вхождения определенного слова на веб-странице, используйте Regex.Replace следующим образом:

var pagecontent = $('body').html();
var newcontent = Regex.Replace(pagecontent , @"[cat]", "dog");
&('body').html(newcontent);

Regex — самое быстрое решение для подобных вещей. Мой пример кода немного прост, он также заменит вхождения внутри тега. или внутри слова например катамаран или .

Чтобы сделать его более совершенным, вы можете искать перед кошкой пробел, а за ним пробел, точку или запятую. Прочтите несколько руководств по регулярным выражениям для этого. (Этому действительно стоит научиться, как только вы узнаете, как это сделать, вы будете часто его использовать)

Удачи!

person Michiel    schedule 15.03.2013
comment
Мне это нравится, но мне это нужно в ванильной версии JS. Не могли бы вы добавить эту версию к своему ответу? - person Frank Conijn; 26.06.2018