用另一個HTML標簽將HTML標簽包裝在純字符串中

Question

我想將一個HTML標記與另一個HTML標記包裝在一個字符串中（所以不是DOM元素，一個普通字符串）。 我創建了這個函數，但是我想知道是否可以在沒有forEach循環的情況下一次性完成。

這是工作功能：

function style(content) {
    var tempStyledContent = content;

    var imgMatches = tempStyledContent.match(/(<img.*?src=[\"'](.+?)[\"'].*?>)/g);

    imgMatches.forEach(function (imgMatch) {
        var imgTag = imgMatch;
        var imgSrc = imgMatch.match(/src\s*=\s*"(.+?)"/)[1];

        tempStyledContent = tempStyledContent.replace(imgTag,
            "<a href=\"" + imgSrc + "\" data-fancybox>" + imgTag + "</a>");
    });

    return tempStyledContent;
}

參數content是一個帶有HTML代碼的字符串。 上面的函數輸出與輸入相同的html，但在所有子img標記周圍帶有（fancybox） 一個標記。

所以輸入字符串像

"<div><img src='example.jpg'/></div>"

將輸出

"<div><a href='example.jpg' data-fancybox><img src='example.jpg'/></a></div>"

有人可以改善嗎？ 我對正則表達式知之甚少，無法使它變得更好。

Answer 1

眾所周知，使用正則表達式處理HTML是有問題的 。 要為其創建健壯的正則表達式，很難在DOM解析器中進行瑣碎的更改。 當正則表達式失敗時，它會靜默失敗，這使得錯誤很容易被忽略。 在regex中工作時，還必須小心處理標記中的所有可能變化，例如空格，屬性順序，引號樣式，標簽關閉樣式，類似於html但不希望修改的屬性內容等。

正如下面的注釋線程中詳盡討論的那樣，只要有足夠的時間和精力，就可以在正則表達式中處理所有這些事情。 但這會導致復雜，難以維護的正則表達式-最重要的是，很難確定您的正則表達式是否可以容納所有可能的有效標記變化。 DOM解析會自動處理所有這些內容，使您可以直接使用結構化數據，而不必處理其字符串表示形式中的所有可能變化。

因此，如果您需要對HTML字符串進行不重要的更改，幾乎總是最好將HTML轉換為真正的DOM樹，使用標准DOM方法進行操作，然后（如有必要）將其轉換回字符串。 幸運的是，它並不需要很多代碼。 這是一個簡單的原始JS演示：

 var htmlToElement = function(html) { var template = document.createElement('template'); template.innerHTML = html.trim(); return template.content.firstChild; }; var elementToHtml = function(el) { return el.outerHTML; } // Usage demo: var string = "<div>This <b>is some</b> <i>html</i><img src='http://example.com'></div>"; var foo = htmlToElement(string); // perform your DOM manipulation as needed on foo here. This would look much simpler if I wasn't so stubborn about avoiding jQuery these days, but here we are anyway: foo.querySelectorAll('img').forEach(function(img) { var link = document.createElement('a'); link.setAttribute('data-fancybox',true); link.setAttribute('href', img.getAttribute('src')); img.parentNode.insertBefore(link,img); link.appendChild(img); }); // back to a string: var bar = elementToHtml(foo); console.log(bar); 

Answer 2

好的，我可能會按照@DanielBeck的建議進行DOM操作。 一旦完成綁定，我將使用$ .wrap http://api.jquery.com/wrap/進行操作。 我只是希望有一種不使用jquery的簡單方法，因此，如果還有其他建議，請對其進行評論。