取消選擇DOM元素

Question

我這裏有一個jquery：

$(document).ready(function() { 
    $(".story-area > h1, .story-area > p, .story-area > div > p").text(function() { 
     return convertString($(this).text()); 
    }); 
}); 

和一個功能：

function convertString(current_text) { 
    var arr_text = current_text.split(' '); 
    var new_text = ''; 
    for (i = 0; i < arr_text.length; i++) { 
     if (arr_text[i].length > 4) { 
      new_text += arr_text[i].replace(/[Hh][Ii]/g, 'HIV') + ' '; 
     } else { 
      new_text += arr_text[i] + ' '; 
     } 
    } 
    return new_text; 
} 

我的問題是，當文字被替換.story-area > div > p在任何標籤被刪除，我不希望這種事情發生。任何想法我怎麼能做到這一點？如果我使用:not()選擇器，轉換字符串將不會被觸發。

有什麼想法？

Answer 1

假設您想要保留標記並只替換文本，可以過濾到text nodes並使用jQuery's replaceWith轉換節點的內容。

function transform() { 
 
    $('.story-area > div > p').contents().filter(function() { 
 
    return this.nodeType === Node.TEXT_NODE; 
 
    }).replaceWith(function() { 
 
    return $(this).text().replace('node', 'REPLACEMENT TEXT'); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="story-area"> 
 
    <div> 
 
    <p> 
 
     Text node in .story-area > div > p 
 
     <strong>Text in a strong tag that shouldn't be touched</strong> 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<button onclick="transform()">Transform</button>

Answer 2

我認爲問題在於你正在重新設置整個文本來替換包括所選對象內的元素在內的所有文本。只需要改變是使用，而不是文本，每個。

$(document).ready(function() { 
$(".story-area > h1, .story-area > p, .story-area > div > p").each(function(index) { 
$(this).text(convertString($(this).text())); 
}); 

}）;

convertString（）函數保持不變。