取消选择DOM元素

Unselect DOM element

本文关键字：元素 DOM 选择 取消      更新时间：2023-09-26

我这里有一个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()选择器，转换字符串将不会被触发。

任何想法吗?

假设你想保留标签，只是替换文本，你可以过滤到文本节点，并使用jQuery的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>

我认为问题是您正在重新设置替换所有内容的整个文本，包括所选对象中的元素。唯一需要改变的是使用每个代替文本。

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

});

convertString()函数保持不变。

相关文章：