gpt4 book ai didi

用于向字符串中的伪 img 添加属性的 javascript 正则表达式

转载 作者:行者123 更新时间:2023-12-01 02:26:03 24 4
gpt4 key购买 nike

我有一个 JavaScript 字符串,包含一些 img 标签。

我需要找到那些没有类属性的类,并添加一个名为“myClass”(class =“myClass”)的类已经有类的 img 标签 - 我不应该碰。

请注意,这不是 DOM,所以我不能使用“element.classList.contains(class)”之类的东西,这对此非常有帮助。

我只能使用正则表达式。同样,该字符串可以包含超过 1 个 img 标签。

示例字符串:

<img src="https://google.com/animage.jpg" class="google">
<img src="https://yahoo.com/animage.jpg">

这是我用来在字符串中查找具有类属性的 img 标签的方法:

<\s*\/?\s*img[^>]* class=[^>]*>

我应该使用什么正则表达式来查找那些没有的正则表达式,并仅为那些添加一个类?

如果我可以只使用 thsoe img 标签,就好像它们是 DOM 的一部分一样,那就最好了,但我不能顺便说一句,我也无法使用 jQuery

编辑:我应该提到该字符串不仅包含 img 标签,还包含其他标签和其他 HTML 内容。

最佳答案

您确实可以(并且应该)避免使用正则表达式来完成此任务。

  1. 创建临时元素
  2. 将字符串作为 innerHTML 附加到元素
  3. 遍历临时元素 DOM 以查找所需的 img(或其中几个)
  4. 更新他们的className
  5. 将更新后的 innerHTML 返回到字符串
  6. 删除临时元素

var html = `Some plain text, 
<a href="whatever">
<img src="https://google.com/animage.jpg" class="google">
</a>.
Some more text

<h2>Header</h2>
<figure>
<img src="https://yahoo.com/animage.jpg">
<figcaption>Image of something</figcaption>
</figure>

more images:
<img src="https://google.com/animage.jpg" class="google">
<img src="https://yahoo.com/animage.jpg">
<img src="https://google.com/animage.jpg" class="google">`;

var tmp = document.createElement('div');
tmp.innerHTML = html;

tmp.querySelectorAll('img:not([class])').forEach(function(e) {
e.className = 'myClass';
});

html = tmp.innerHTML;
tmp = null;

console.log(html);

关于用于向字符串中的伪 img 添加属性的 javascript 正则表达式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48792229/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com