在元素內部文本的正則表達式匹配周圍添加 HTML

Question

我有一個帶有一段內部文本的 span 元素。 我需要通過正則表達式來定位該文本的特定部分，並將我的匹配項轉換為具有 class 屬性 class="hightlight-yellow" 和名為 my-custom-attribute="hello" 的自定義屬性的 span 元素。

這是我的輸入和預期 output...

輸入

<span class="message"> This is some text $HIGH:LOW $LOW:HIGH </span>

Output

<span> This is some text <span class="highlight-yellow" my-custom-attribute="hello">$HIGH:LOW</span> <span class="highlight-yellow" my-custom-attribute="hello">$LOW:HIGH</span></span>

我該如何更換？ 這是我當前收集匹配項的代碼

   function handle()
{
    let element = document.getElementsByClassName('message')
    let text = element[0].innerText;
    let regex = /([^=])\$([A-Za-z:]{1,})/g;
    let matches = text.match(regex);

    if(matches != null)
    {
        for(let i = 0; i < matches.length; ++i)
        {
            // TODO takes matches are replace with spans with attributes.
        }
    }
}

Answer 1

您可以簡單地在String.prototype.replace()中使用您的正則表達式，並將其替換為包裝您的捕獲組的所需標記。

我已經刪除了第一個捕獲組，因為它與之前的空白空格匹配，這不是您想要的。 最重要的是，我建議使用querySelectorAll並遍歷節點列表以將來證明您的設置。

如果您真的只想.message匹配選擇器 .message 的第一個元素，那也是可能的。

注意：您的 output 似乎也從原始<span>元素中刪除了message class ，但我不確定這是拼寫錯誤還是故意的。

請參閱下面的概念驗證：

 function handle() { const regex = /\$([A-Za-z:]{1,})/g; document.querySelectorAll('.message').forEach(el => { el.innerHTML = el.innerText.replace(regex, '<span class="highlight-yellow" my-custom-attribute="hello">$1</span>'); }); } handle();

 span.highlight-yellow { background-color: yellow; }

 <span class="message">This is some text $HIGH:LOW $LOW:HIGH</span>