【解決方法】どうすれば交換できますか "スパン" 文字列で、それが HTML タグの場合のみ?

あなたは試すことができます：

content.replaceAll(/<(\/)?span([^>]*)>/g, '<$1a$2>');

これはほとんどの基本をカバーするはずですが、HTML 要素を扱うのは非常に難しい場合があることに注意してください。 誰かが要素を閉じるのを忘れると、マッチングが機能しない可能性があります。 一致するたびに文字列をループする方が良い場合があります <span また </span そのように置き換えます。 しかし、コンテンツに適切にフォーマットされた要素が含まれていることがわかっている場合は、正規表現が機能する可能性があります!

これは私が見つけた解決策です（しかし、もっと良い解決策があるかもしれません…）：

text.innerHTML = text.innerHTML.replace(/<\/?[^>]+>/g, m => m.replace("span", "a"));

あなたのテキストが –

Lorem ipsum span sit amet, <a data-link="xxx">consectetur</a> adipiscing elit. Sed span velit, vestibulum vel <a data-link="yyy">pellentesque</a> sed, mattis et span. Morbi justo est, pharetra vitae nisl at, <a data-link="zzz">aliquet</a> consequat sapien

段落要素にあった場合は、次のコードを試すことができます-
1. p 要素に id を与え、要素内にテキストを追加します –

<p id="change_MySpan">
        Lorem ipsum span sit amet, 
        <span data-link="xxx">consectetur</span> 
        adipiscing elit. Sed span velit, vestibulum vel 
        <span data-link="yyy">pellentesque</span> 
        sed, mattis et span. Morbi justo est, pharetra vitae nisl at, 
        <span data-link="zzz">aliquet</span> 
        consequat sapien
    </p>

JavaScript タグを追加し、次のコードを実行します –

<script>
      const textElement = document.getElementById('change_MySpan');
      const textContent = textElement.innerHTML;

      if (textContent.includes('<span')) {
        const linkContent = textContent.replace(/<span([^>]*)>/g, '<a$1>');
        const linkElement = document.createElement('div');
        linkElement.innerHTML = linkContent;
        textElement.parentNode.replaceChild(linkElement, textElement);
      }
    </script>

スクリプトは、基本的に「<」とスパン部分を含むすべてのテキストをチェックし、それをスパン要素として識別してから、リンク要素に変更します。 このコードを実行すると、ブラウザに以下が返されます –

Lorem ipsum span sit amet, consectetur adipiscing elit. Sed span velit, vestibulum vel pellentesque sed, mattis et span. Morbi justo est, pharetra vitae nisl at, aliquet consequat sapien

要素以外のスパン ワードはすべて必要に応じて返されます。

右クリックしてテキストを調べると、データ リンク xxx、yyy、zzz を持つ 3 つの a 要素があることがわかります。