查找並替換引號內的文本忽略html標記

Question

我有HTML標簽的簡單文本和引號中的一些文本我想在引號內的文本上添加span。 例如：

<p>A quick "brown" fox "jumps" over <a href="www.gamescottage.com">the</a> lazy dog.</p>

我想要將此行更改為以下內容：

<p>A quick "<span>brown</span>" fox "<span>jumps</span>" over <a href="www.gamescottage.com">the</a> lazy dog.</p>

我正在使用此代碼執行此操作：

<script>
    $('document').ready(function (){
        var text = $('p').html();
        text = text.replace(/"(.*?)"/g, '"<span class="quote">$1</span>"');
        $('p').html(text);
     });
</script>

但它取代了HTML錨標記的引用以及任何解決方案？ 簡而言之，我只想在引號中添加span而忽略HTML標記的引號。

Answer 1

JavaScript已經為你構建了一個內置的DOM解析器 - 而不是試圖用正則表達式來解析HTML本身很困難且邊緣不可能 - 你可以使用DOM為你帶來的內置功能。 在你的情況下，我將使用jQuery演示它，但非jQuery解決方案同樣簡單：

$("p"). // all p tags
contents(). // select the actual contents of the tags 
filter(function(i,el){   return el.nodeType === 3; }). // only the text nodes
each(function(i, el){ 
    var $el = $(el); // take the text node as a jQuery element
    var replaced = $el.text().replace(/"(.*?)"/g,'<span>"$1"</span>') // wrap
    $el.replaceWith(replaced); // and replace
});

這是一個小提琴 。

Answer 2

從你的代碼我假設你擅長正則表達式和腳本。 這是一個算法，您可以使用它編寫代碼。

在您使用當前代碼替換文本后，取出結果字符串並檢查打開的html標記內是否存在任何span標記（例如： <a ... <span> ）並將整個HTML實體替換為原始字符串。 通過這個你可以實現你所需要的。

注意：我已經在Java中完成了相同的操作，因為我現在沒有使用該代碼片段

希望這對你有所幫助

Answer 3

您可以通過三個單獨的步驟執行此操作：

1. 使用標記臨時替換HTML標記中的引號
2. 為任何剩余的報價添加跨度
3. 恢復任何標記放置的引號

步驟1：

text = text.replace(/([^>"]*)"(?=[^<]*>)/g, '$1#Q#');

這使用先行看是否報價之后是>之前的下一個<

第2步：

text = text.replace(/"(.*?)"/g, '<span class="quote">$1</span>');

第3步：

text = text.replace(/#Q#/g, '"');