Question

我希望javascript执行此操作：

根据div中的单词，我希望将字符串替换为img标签。

如果我有

<div id="example" style="align-content: right; text-align: right">abc</div>

与`

<div id="example" style="align-content: right; text-align: right"><img src="example123.html"></div>`

但是只有在div内是文本/字符串“ abc”

另一种情况，如果我有

<div id="example" style="align-content: right; text-align: right">def</div>

我想转换成这个

<div id="example" style="align-content: right; text-align: right"><img src="anotherexample.html"></div>

与第一种情况类似，如果文本为“ def”，则替换为另一个img。

我已经使用jquery完成了此操作

这是我在jquery中完成的代码

$("#example:contains('abc')").html(function (_, html) {return html.replace(/abc/g, "<img src=example123.html>")});

$("#example:contains('def')").html(function (_, html) {return html.replace(/def/g, "<img src=anotherexample.html>")});

这很容易做到，但是我在工作中使用jquery时遇到了一些问题，因此我不能也不应使用jquery或其他框架。如果它是用纯JavaScript完成的，那就太好了。

我几乎忘了使用条件语句（特别是Swith）会更好，我认为使用switch而不是其他方法可以避免纠结

预先感谢您的回答。

PD：如果您问我为什么需要解决这个问题，原因是我正在使用一个生成pdf文件的应用程序，该文件会从DB中提取数据，并根据文本替换为具有特定URL的图片

Answer 1

因为您使用的元素带有特定的id，所以它是唯一的-您需要做的就是选择该元素并检查其innerHTML是否包含您要查找的字符串。您可以使用正则表达式将abc或def的所有实例替换为适当的标记：

const example = document.querySelector('#example');
const srcs = {
  abc: 'example123',
  def: 'anotherexample'
};
example.innerHTML = example.innerHTML.replace(
  /abc|def/g,
  prop => `<img src="${srcs[prop]}">`
);

<div id="example" style="align-content: right; text-align: right">before abc after</div>

Answer 2

尝试一下。它遍历所有div元素，并使用text检查它们的textContent。如果匹配，则使用innerHTML

用image标签替换文本。

var a = document.querySelectorAll('div');
a.forEach((e) => {
  if (e.textContent == "abc")
    e.innerHTML = "<img src='example123.com'>"
 if(e.textContent == "def")
    e.innerHTML = "<img src='anotherexample.com'>"
})

<div id="example" style="align-content: right; text-align: right">abc</div>
<div id="example" style="align-content: right; text-align: right">def</div>

用纯JavaScript将html字符串替换为img标签

2 个答案: