jQuery防止在href上替换答案

【问题标题】：jQuery prevent replace on hrefjQuery防止在href上替换
【发布时间】：2021-02-26 16:26:24
【问题描述】：

我正在使用这个脚本来包装一个带有 span 标签的特定单词。如果单词是 href 属性，我需要排除替换。

// Prevent orphaned words for strings with more than 3 words
$("p:not(.form-row),h1,h2,h3,h4,h5,h6").each(function (i, e) {
    var text = $(e).html();
    text = text.trim().split(' ');
    if (text.length > 3) {
        var lastWord = text.pop();
        text = text.join(' ') + "&nbsp;" + lastWord;
        $(e).html(text);
    }

    // Wrap all occurrences of word-123 with a span so it doesn't break to two lines
    $(e).html( $(e).html().replace(/word-123/ig, '<span class="nowrap">$&</span>') );

});

当单词在href 中时，href 中的单词会被换行，从而破坏href。所以

Lorem ipsum dolor sit amet, <a href="word-123">consectetur</a> adipiscing elit.

呈现为

Lorem ipsum dolor sit amet, <a href="<span class="nowrap">word-123</span>">consectetur</a> adipiscing elit.

【问题讨论】：

你为什么要从 HTML 开始？ var text = $(e).html(); 只需使用 .text() .. 并在此处将其插入为 html：$(e).html(text);。当您使用它时，这将实现 href 属性和任何其他 HTML 属性。
另外：:not(a[href])
这能回答你的问题吗？ jQuery: Find text and replace with HTML
用 .text() 替换 var text = $(e).html() 会完全删除链接。
最近有人为此提供了他们自己的问题的答案 - 去给他们一个赞成票：stackoverflow.com/a/66372448/2181514

标签： javascript jquery

【解决方案1】：

正如您问题下方的 cmets 中所述，我在几天前提出了类似的解决方案。

诀窍是使用 jQuery 的contents() 来获取不同类型的节点（元素或文本节点）并以不同的方式威胁它们。我使用 jQuery 的 clone 为子元素中的每个单词克隆包装元素。

正如我在帖子中提到的，该解决方案有两个已知问题：

只有一级子元素有效（所以Hello World 不会）
针对另一个元素的文本创建两个单独的单词（所以 Username 是两个单词）

这些应该是可以修复的。

我已经为你的用例做了一些修改：

$.fn.convertToSeperateWords = function() {
  return this.each(function() {
    var $el = $(this);
    var elements = convertToSeperateWords($el, false);

    $el.empty().append(elements);

    return $el;
  });
}

$('p').convertToSeperateWords();

function convertToSeperateWords($element, asSubNode) {
  var elements = [];

  var childNodes = $element.contents();

  // Loop through all child nodes of selected element
  for (var c = 0; c < childNodes.length; c++) {
    var node = childNodes[c];
    var type = node.nodeType;

    // Process a child element
    if (type == Node.ELEMENT_NODE) {
      Array.prototype.push.apply(elements, convertToSeperateWords($(node), true));
    }

    // Process a piece of text
    else if (type == Node.TEXT_NODE) {
      var text = node.nodeValue;

      // Process each word
      var words = text.split(' ');
      for (var w = 0; w < words.length; w++) {
        var word = words[w];

        // Skip empty words
        if (word == '') continue;

        // Wrap each word into span
        var $word = $('<span/>').addClass('word');

        if (!asSubNode) {
          $word.html(word);
          elements.push($word);
        }

        if (asSubNode) {
          var $subNode = $element.clone().empty().html(word).addClass('word');
          elements.push($subNode);
        }
      }
    }
  }
  return elements;
}

p,
.word {
  padding: 3px 1px;
}

p {
  border: 1px solid red;
}

.word {
  display: inline-block;
  border: 1px solid green;
  margin-left: 2px;
  margin-right: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, <a href="word-123">consectetur word2</a> adipiscing elit.</p>

【讨论】：