Замена текста на HTML с помощью Cheerio в NodeJS - PullRequest
Новая
       7

Замена текста на HTML с помощью Cheerio в NodeJS

0 голосов
/ 23 мая 2018

Я хочу заменить все вхождения слова в структурированном HTML тегом.

Например, при наличии такого HTML-кода 

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, magna nec sollicitudin varius, ligula nisi finibus nulla, vel posuere libero erat eu tortor.
</p>
<p>
    <ul>
        <li>Lorem</li>
        <li>ipsum</li>
        <li>dolor</li>
        <li>sit</li>
        <li>amet</li>
    </ul>
</p>
<p>
    Lorem <b>ipsum</b> <span><em>dolor</em></span> sit amet, consectetur adipiscing elit.
</p>

Я хочу заменить всевхождения слова 'ipsum' с этим тегом 

<a href="https://www.google.com/search?q=ipsum">ipsum</a>

В этом случае я попробовал очень простое решение, которое не сработало: 

const $ = cheerio.load(lorem_ipsum_html);
let words = $.text().trim().split(' ');
for (let t in words) {
    let res = words[t];
    if (words[t] == 'ipsum') res = '<a href="https://www.google.com/search?q=ipsum">ipsum</a>';
    $.html().replace(words[t], res);
}
return $.html();

В этом случае функция возвращаетнеизменный HTML, хотя замена выглядела так, как будто она работает.Кроме того, я также попытался перенести несколько реализаций jQuery, таких как:

Заменить текст элементом HTML

Использование .replace для замены текста HTML?

без удачи.

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Я закончил с этим (не очень чистым) решением.Это не лучшая вещь в мире, но она работает.Здесь еще есть возможности для улучшения. 

let $ = cheerio.load(lorem_ipsum_html);
let words = $.text().trim().split(' ');
for (let t in words) {
    let res =  words[t];
    if(words[t] == 'ipsum') res = '<a href="https://www.google.com/search?q=ipsum">ipsum</a>';
    let $ = cheerio.load($.html().replace(words[t], res));
}
return $.html();

В этом случае структура HTML остается неизменной, а теги привязки просто вставляются в нужное место. 

<p>
    Lorem <a href="https://www.google.com/search?q=ipsum">ipsum</a> dolor sit amet, consectetur adipiscing elit. Fusce porttitor, magna nec sollicitudin varius, ligula nisi finibus nulla, vel posuere libero erat eu tortor.
</p>
<p>
    <ul>
        <li>Lorem</li>
        <li><a href="https://www.google.com/search?q=ipsum">ipsum</a></li>
        <li>dolor</li>
        <li>sit</li>
        <li>amet</li>
    </ul>
</p>
<p>
    Lorem <b><a href="https://www.google.com/search?q=ipsum">ipsum</a></b> <span><em>dolor</em></span> sit amet, consectetur adipiscing elit.
</p>
0 голосов
/ 24 мая 2018

1- Загрузка тела с помощью cheerio 

var $ = cheerio.load(body);

2- С помощью этой рекурсивной функции вы можете заменить свою цель во всех элементах и ​​их дочерних элементах 

function replacer($, text) {
    if ($(text).children().length) {
        $(text).children().each(function (itm) {
            return replacer($, $(this));
        });
    }
    else {
        var value = $(text).text();
        value = value.replace(/ipsum/g, '<a href="https://www.google.com/search?q=ipsum">ipsum</a>');
        return $(text).text(value);
    }
}

3- Поверните узлы cheerio dom обратно в html с помощью этого 

return $.html(bb);

4- Замените все &quot;, &lt; и&gt; с правильными символами. 

f(b).replace(/&lt;/g,'<').replace(/&gt;/g, '>').replace(/&quot;/g, '"')

Надеюсь, это поможет вам.Просто измените, где вы хотите, код 

var b = `<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, magna nec sollicitudin varius, ligula nisi finibus nulla, vel posuere libero erat eu tortor.
</p>
<p>
<ul>
    <li>Lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
</ul>
</p>
<p>
Lorem <b>ipsum</b> <span><em>dolor</em></span> sit amet, consectetur adipiscing elit.
</p>`;

var cheerio = require('cheerio');

function replacer($, text) {
  if ($(text).children().length) {
    $(text).children().each(function(itm) {
      return replacer($, $(this));
    });
  } else {
    var value = $(text).text();
    value = value.replace(/ipsum/g, '<a href="https://www.google.com/search?q=ipsum">ipsum</a>');
    return $(text).text(value);
  }
}

function f(body) {
  var $ = cheerio.load(body);
  var bb = $("p").each(function(itm) {
    return replacer($, $(this));
  });
  return $.html(bb);
}

console.log(f(b).replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"'))

Вывод: 

<p>
  Lorem <a href="https://www.google.com/search?q=ipsum">ipsum</a> dolor sit amet, consectetur adipiscing elit. Fusce porttitor, magna nec sollicitudin varius, ligula nisi finibus nulla, vel posuere libero erat eu tortor.
</p>
<p>
  <ul>
    <li>Lorem</li>
    <li><a href="https://www.google.com/search?q=ipsum">ipsum</a></li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
  </ul>
</p>
<p>
  Lorem <b><a href="https://www.google.com/search?q=ipsum">ipsum</a></b> <span><em>dolor</em></span> sit amet, consectetur adipiscing elit.
...