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（）函数保持不变。

取消选择DOM元素

2 个答案: