javascript - 用span类替换HTML字符串中的一些innerTexts并发布回DOM

Question

我有一个 HTML 字符串(不是 DOM 元素)，例如:

  <p>This is a sample dataa<p>
  <img src="Randomz" alt="Randomz Image">Randomz is the name of the image</img>

我需要附加一个<span class="spellerror"></span>对于有问题的单词，也只需要检查和附加文本内容。

  <p>This is a sample dataa<p>
  <img src="Randomz" alt="Randomz Image"><span class="spellerror"> Randomz </span> is the name of the image</img>  

我的问题是这是 HTML 和 regex 的混合。是否有可能:

1. 要使其成为某种 DOM 元素，然后对其进行处理？
2. 或者是否有正则表达式方法可以实现此目的。

我不想触及属性，如果我修改文本内容，我如何将其发布回来...因为我需要在那里插入一些 HTML。

Answer 1

我不喜欢这个解决方案，但它有效:

'<img src="Randomz" alt="Randomz Image">Randomz is the name of the image</img>'
    .match(/<[^>]+>|[^<]+|<\/[^>]+>/g)
    .map(function (text, index) {
        if (index === 1) {
            return text.replace(/(Randomz)/, '<span class="spellerror">$1</span>');
        } else {
            return text;
        }
    })
    .join('');

正则表达式分为开始标记、innerText、结束标记。然后迭代所有成员，如果是innerText，则替换为所需的文本然后加入。

我仍在尝试想一些不那么迂回的东西，但这就是我所得到的