javascript - 取消选择 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>