我这里有一个 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()
选择器,则不会触发转换字符串。
有什么想法吗?
最佳答案
假设您想保留标签并只替换文本,您可以过滤到 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>
关于javascript - 取消选择 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32873283/