html - 在 NodeJS 中使用 Cheerio 将文本替换为 HTML
问题描述
我想用标签替换结构化 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 实现,例如:
没有运气。
解决方案
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-将所有"
,<
和替换>
为正确的符号。
f(b).replace(/</g,'<').replace(/>/g, '>').replace(/"/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(/</g, '<').replace(/>/g, '>').replace(/"/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.
推荐阅读
- vue.js - 在 Nuxt 项目中将自定义 Vue mixins 和辅助函数放在哪里?
- google-chrome - EvalError:拒绝将字符串评估为 JavaScript,因为 'unsafe-eval' - Chrome 扩展
- html - 我希望我的 main 在 Bootstrap 中与我的 jumbotron 重叠
- c++ - 即使在 getline() 之后使用 C++ cin.ignore() 也可以工作,但为什么呢?
- java - 防止java产生不正确的结果
- python - 在 pandas json 中添加一个更高一级的对象
- javascript - 从 html .class 的所有值创建 JS 数组
- android-studio - 如何让我的 Game Maker Studio 2 项目在 Android 模拟器上正常运行?
- flutter - 每次测试执行期间 Flutter 都会构建新的 .apk 文件,即使没有代码更改
- r - 查找多线串和多边形 sf r 之间的交点